diff --git a/2.5/CNAME b/2.5/CNAME new file mode 100644 index 000000000..6df57ef93 --- /dev/null +++ b/2.5/CNAME @@ -0,0 +1 @@ +element.eleme.io diff --git a/2.5/docs.005603c.js b/2.5/docs.005603c.js new file mode 100644 index 000000000..c1af7bb7b --- /dev/null +++ b/2.5/docs.005603c.js @@ -0,0 +1,57 @@ +!function(e){function t(t){for(var n,i,o=t[0],s=t[1],a=0,l=[];a-1}function f(e,t){if(e){for(var n=e.className,i=(t||"").split(" "),r=0,o=i.length;r=0&&Math.floor(t)===t&&isFinite(e)}function p(e){return null==e?"":"object"==typeof e?JSON.stringify(e,null,2):String(e)}function f(e){var t=parseFloat(e);return isNaN(t)?e:t}function m(e,t){for(var n=Object.create(null),i=e.split(","),r=0;r-1)return e.splice(n,1)}}var y=Object.prototype.hasOwnProperty;function b(e,t){return y.call(e,t)}function M(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}var w=/-(\w)/g,C=M(function(e){return e.replace(w,function(e,t){return t?t.toUpperCase():""})}),x=M(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}),N=/\B([A-Z])/g,D=M(function(e){return e.replace(N,"-$1").toLowerCase()});var _=Function.prototype.bind?function(e,t){return e.bind(t)}:function(e,t){function n(n){var i=arguments.length;return i?i>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n};function I(e,t){t=t||0;for(var n=e.length-t,i=new Array(n);n--;)i[n]=e[n+t];return i}function k(e,t){for(var n in t)e[n]=t[n];return e}function j(e){for(var t={},n=0;n0,Z=W&&W.indexOf("edge/")>0,K=(W&&W.indexOf("android"),W&&/iphone|ipad|ipod|ios/.test(W)||"ios"===H),J=(W&&/chrome\/\d+/.test(W),{}.watch),X=!1;if(Q)try{var ee={};Object.defineProperty(ee,"passive",{get:function(){X=!0}}),window.addEventListener("test-passive",null,ee)}catch(e){}var te=function(){return void 0===R&&(R=!Q&&!V&&void 0!==e&&(e.process&&"server"===e.process.env.VUE_ENV)),R},ne=Q&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function ie(e){return"function"==typeof e&&/native code/.test(e.toString())}var re,oe="undefined"!=typeof Symbol&&ie(Symbol)&&"undefined"!=typeof Reflect&&ie(Reflect.ownKeys);re="undefined"!=typeof Set&&ie(Set)?Set:function(){function e(){this.set=Object.create(null)}return e.prototype.has=function(e){return!0===this.set[e]},e.prototype.add=function(e){this.set[e]=!0},e.prototype.clear=function(){this.set=Object.create(null)},e}();var se=T,ae=0,le=function(){this.id=ae++,this.subs=[]};le.prototype.addSub=function(e){this.subs.push(e)},le.prototype.removeSub=function(e){v(this.subs,e)},le.prototype.depend=function(){le.target&&le.target.addDep(this)},le.prototype.notify=function(){var e=this.subs.slice();for(var t=0,n=e.length;t-1)if(o&&!b(r,"default"))s=!1;else if(""===s||s===D(e)){var l=Pe(String,r.type);(l<0||a0&&(at((u=e(u,(n||"")+"_"+l))[0])&&at(h)&&(i[c]=me(h.text+u[0].text),u.shift()),i.push.apply(i,u)):a(u)?at(h)?i[c]=me(h.text+u):""!==u&&i.push(me(u)):at(u)&&at(h)?i[c]=me(h.text+u.text):(s(t._isVList)&&o(u.tag)&&r(u.key)&&o(n)&&(u.key="__vlist"+n+"_"+l+"__"),i.push(u)));return i}(e):void 0}function at(e){return o(e)&&o(e.text)&&!1===e.isComment}function lt(e,t){return(e.__esModule||oe&&"Module"===e[Symbol.toStringTag])&&(e=e.default),l(e)?t.extend(e):e}function ut(e){return e.isComment&&e.asyncFactory}function ct(e){if(Array.isArray(e))for(var t=0;tkt&&xt[n].id>e.id;)n--;xt.splice(n+1,0,e)}else xt.push(e);_t||(_t=!0,Ke(jt))}}(this)},St.prototype.run=function(){if(this.active){var e=this.get();if(e!==this.value||l(e)||this.deep){var t=this.value;if(this.value=e,this.user)try{this.cb.call(this.vm,e,t)}catch(e){Fe(e,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,e,t)}}},St.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},St.prototype.depend=function(){for(var e=this.deps.length;e--;)this.deps[e].depend()},St.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||v(this.vm._watchers,this);for(var e=this.deps.length;e--;)this.deps[e].removeSub(this);this.active=!1}};var Lt={enumerable:!0,configurable:!0,get:T,set:T};function Ot(e,t,n){Lt.get=function(){return this[t][n]},Lt.set=function(e){this[t][n]=e},Object.defineProperty(e,n,Lt)}function At(e){e._watchers=[];var t=e.$options;t.props&&function(e,t){var n=e.$options.propsData||{},i=e._props={},r=e.$options._propKeys=[];e.$parent&&we(!1);var o=function(o){r.push(o);var s=Ee(o,t,n,e);Ne(i,o,s),o in e||Ot(e,"_props",o)};for(var s in t)o(s);we(!0)}(e,t.props),t.methods&&function(e,t){e.$options.props;for(var n in t)e[n]="function"!=typeof t[n]?T:_(t[n],e)}(e,t.methods),t.data?function(e){var t=e.$options.data;c(t=e._data="function"==typeof t?function(e,t){ce();try{return e.call(t,t)}catch(e){return Fe(e,t,"data()"),{}}finally{he()}}(t,e):t||{})||(t={});var n=Object.keys(t),i=e.$options.props,r=(e.$options.methods,n.length);for(;r--;){var o=n[r];0,i&&b(i,o)||(s=void 0,36!==(s=(o+"").charCodeAt(0))&&95!==s&&Ot(e,"_data",o))}var s;xe(t,!0)}(e):xe(e._data={},!0),t.computed&&function(e,t){var n=e._computedWatchers=Object.create(null),i=te();for(var r in t){var o=t[r],s="function"==typeof o?o:o.get;0,i||(n[r]=new St(e,s||T,T,Et)),r in e||zt(e,r,o)}}(e,t.computed),t.watch&&t.watch!==J&&function(e,t){for(var n in t){var i=t[n];if(Array.isArray(i))for(var r=0;r-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!h(e)&&e.test(t)}function gn(e,t){var n=e.cache,i=e.keys,r=e._vnode;for(var o in n){var s=n[o];if(s){var a=fn(s.componentOptions);a&&!t(a)&&vn(n,o,i,r)}}}function vn(e,t,n,i){var r=e[t];!r||i&&r.tag===i.tag||r.componentInstance.$destroy(),e[t]=null,v(n,t)}!function(e){e.prototype._init=function(e){var t=this;t._uid=cn++,t._isVue=!0,e&&e._isComponent?function(e,t){var n=e.$options=Object.create(e.constructor.options),i=t._parentVnode;n.parent=t.parent,n._parentVnode=i;var r=i.componentOptions;n.propsData=r.propsData,n._parentListeners=r.listeners,n._renderChildren=r.children,n._componentTag=r.tag,t.render&&(n.render=t.render,n.staticRenderFns=t.staticRenderFns)}(t,e):t.$options=Oe(hn(t.constructor),e||{},t),t._renderProxy=t,t._self=t,function(e){var t=e.$options,n=t.parent;if(n&&!t.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={},e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}(t),function(e){e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&ft(e,t)}(t),function(e){e._vnode=null,e._staticTrees=null;var t=e.$options,n=e.$vnode=t._parentVnode,r=n&&n.context;e.$slots=mt(t._renderChildren,r),e.$scopedSlots=i,e._c=function(t,n,i,r){return un(e,t,n,i,r,!1)},e.$createElement=function(t,n,i,r){return un(e,t,n,i,r,!0)};var o=n&&n.data;Ne(e,"$attrs",o&&o.attrs||i,null,!0),Ne(e,"$listeners",t._parentListeners||i,null,!0)}(t),Ct(t,"beforeCreate"),function(e){var t=Ut(e.$options.inject,e);t&&(we(!1),Object.keys(t).forEach(function(n){Ne(e,n,t[n])}),we(!0))}(t),At(t),function(e){var t=e.$options.provide;t&&(e._provided="function"==typeof t?t.call(e):t)}(t),Ct(t,"created"),t.$options.el&&t.$mount(t.$options.el)}}(dn),function(e){var t={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(e.prototype,"$data",t),Object.defineProperty(e.prototype,"$props",n),e.prototype.$set=De,e.prototype.$delete=_e,e.prototype.$watch=function(e,t,n){if(c(t))return Ft(this,e,t,n);(n=n||{}).user=!0;var i=new St(this,e,t,n);if(n.immediate)try{t.call(this,i.value)}catch(e){Fe(e,this,'callback for immediate watcher "'+i.expression+'"')}return function(){i.teardown()}}}(dn),function(e){var t=/^hook:/;e.prototype.$on=function(e,n){var i=this;if(Array.isArray(e))for(var r=0,o=e.length;r1?I(t):t;for(var n=I(arguments,1),i=0,r=t.length;iparseInt(this.max)&&vn(s,a[0],a,this._vnode)),t.data.keepAlive=!0}return t||e&&e[0]}}};!function(e){var t={get:function(){return F}};Object.defineProperty(e,"config",t),e.util={warn:se,extend:k,mergeOptions:Oe,defineReactive:Ne},e.set=De,e.delete=_e,e.nextTick=Ke,e.options=Object.create(null),$.forEach(function(t){e.options[t+"s"]=Object.create(null)}),e.options._base=e,k(e.options.components,bn),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=I(arguments,1);return n.unshift(this),"function"==typeof e.install?e.install.apply(e,n):"function"==typeof e&&e.apply(null,n),t.push(e),this}}(e),function(e){e.mixin=function(e){return this.options=Oe(this.options,e),this}}(e),pn(e),function(e){$.forEach(function(t){e[t]=function(e,n){return n?("component"===t&&c(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&"function"==typeof n&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}})}(e)}(dn),Object.defineProperty(dn.prototype,"$isServer",{get:te}),Object.defineProperty(dn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(dn,"FunctionalRenderContext",{value:Xt}),dn.version="2.5.22";var Mn=m("style,class"),wn=m("input,textarea,option,select,progress"),Cn=m("contenteditable,draggable,spellcheck"),xn=m("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),Nn="http://www.w3.org/1999/xlink",Dn=function(e){return":"===e.charAt(5)&&"xlink"===e.slice(0,5)},_n=function(e){return Dn(e)?e.slice(6,e.length):""},In=function(e){return null==e||!1===e};function kn(e){for(var t=e.data,n=e,i=e;o(i.componentInstance);)(i=i.componentInstance._vnode)&&i.data&&(t=jn(i.data,t));for(;o(n=n.parent);)n&&n.data&&(t=jn(t,n.data));return function(e,t){if(o(e)||o(t))return Tn(e,Sn(t));return""}(t.staticClass,t.class)}function jn(e,t){return{staticClass:Tn(e.staticClass,t.staticClass),class:o(e.class)?[e.class,t.class]:t.class}}function Tn(e,t){return e?t?e+" "+t:e:t||""}function Sn(e){return Array.isArray(e)?function(e){for(var t,n="",i=0,r=e.length;i-1?ei(e,t,n):xn(t)?In(n)?e.removeAttribute(t):(n="allowfullscreen"===t&&"EMBED"===e.tagName?"true":t,e.setAttribute(t,n)):Cn(t)?e.setAttribute(t,In(n)||"false"===n?"false":"true"):Dn(t)?In(n)?e.removeAttributeNS(Nn,_n(t)):e.setAttributeNS(Nn,t,n):ei(e,t,n)}function ei(e,t,n){if(In(n))e.removeAttribute(t);else{if(G&&!q&&("TEXTAREA"===e.tagName||"INPUT"===e.tagName)&&"placeholder"===t&&!e.__ieph){var i=function(t){t.stopImmediatePropagation(),e.removeEventListener("input",i)};e.addEventListener("input",i),e.__ieph=!0}e.setAttribute(t,n)}}var ti={create:Jn,update:Jn};function ni(e,t){var n=t.elm,i=t.data,s=e.data;if(!(r(i.staticClass)&&r(i.class)&&(r(s)||r(s.staticClass)&&r(s.class)))){var a=kn(t),l=n._transitionClasses;o(l)&&(a=Tn(a,Sn(l))),a!==n._prevClass&&(n.setAttribute("class",a),n._prevClass=a)}}var ii,ri={create:ni,update:ni},oi="__r",si="__c";function ai(e,t,n){var i=ii;return function r(){null!==t.apply(null,arguments)&&ui(e,r,n,i)}}function li(e,t,n,i){var r;t=(r=t)._withTask||(r._withTask=function(){We=!0;try{return r.apply(null,arguments)}finally{We=!1}}),ii.addEventListener(e,t,X?{capture:n,passive:i}:n)}function ui(e,t,n,i){(i||ii).removeEventListener(e,t._withTask||t,n)}function ci(e,t){if(!r(e.data.on)||!r(t.data.on)){var n=t.data.on||{},i=e.data.on||{};ii=t.elm,function(e){if(o(e[oi])){var t=G?"change":"input";e[t]=[].concat(e[oi],e[t]||[]),delete e[oi]}o(e[si])&&(e.change=[].concat(e[si],e.change||[]),delete e[si])}(n),it(n,i,li,ui,ai,t.context),ii=void 0}}var hi={create:ci,update:ci};function di(e,t){if(!r(e.data.domProps)||!r(t.data.domProps)){var n,i,s=t.elm,a=e.data.domProps||{},l=t.data.domProps||{};for(n in o(l.__ob__)&&(l=t.data.domProps=k({},l)),a)r(l[n])&&(s[n]="");for(n in l){if(i=l[n],"textContent"===n||"innerHTML"===n){if(t.children&&(t.children.length=0),i===a[n])continue;1===s.childNodes.length&&s.removeChild(s.childNodes[0])}if("value"===n){s._value=i;var u=r(i)?"":String(i);pi(s,u)&&(s.value=u)}else s[n]=i}}}function pi(e,t){return!e.composing&&("OPTION"===e.tagName||function(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}(e,t)||function(e,t){var n=e.value,i=e._vModifiers;if(o(i)){if(i.lazy)return!1;if(i.number)return f(n)!==f(t);if(i.trim)return n.trim()!==t.trim()}return n!==t}(e,t))}var fi={create:di,update:di},mi=M(function(e){var t={},n=/:(.+)/;return e.split(/;(?![^(]*\))/g).forEach(function(e){if(e){var i=e.split(n);i.length>1&&(t[i[0].trim()]=i[1].trim())}}),t});function gi(e){var t=vi(e.style);return e.staticStyle?k(e.staticStyle,t):t}function vi(e){return Array.isArray(e)?j(e):"string"==typeof e?mi(e):e}var yi,bi=/^--/,Mi=/\s*!important$/,wi=function(e,t,n){if(bi.test(t))e.style.setProperty(t,n);else if(Mi.test(n))e.style.setProperty(t,n.replace(Mi,""),"important");else{var i=xi(t);if(Array.isArray(n))for(var r=0,o=n.length;r-1?t.split(_i).forEach(function(t){return e.classList.add(t)}):e.classList.add(t);else{var n=" "+(e.getAttribute("class")||"")+" ";n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function ki(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(_i).forEach(function(t){return e.classList.remove(t)}):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var n=" "+(e.getAttribute("class")||"")+" ",i=" "+t+" ";n.indexOf(i)>=0;)n=n.replace(i," ");(n=n.trim())?e.setAttribute("class",n):e.removeAttribute("class")}}function ji(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&k(t,Ti(e.name||"v")),k(t,e),t}return"string"==typeof e?Ti(e):void 0}}var Ti=M(function(e){return{enterClass:e+"-enter",enterToClass:e+"-enter-to",enterActiveClass:e+"-enter-active",leaveClass:e+"-leave",leaveToClass:e+"-leave-to",leaveActiveClass:e+"-leave-active"}}),Si=Q&&!q,Li="transition",Oi="animation",Ai="transition",Ei="transitionend",zi="animation",$i="animationend";Si&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(Ai="WebkitTransition",Ei="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(zi="WebkitAnimation",$i="webkitAnimationEnd"));var Pi=Q?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(e){return e()};function Fi(e){Pi(function(){Pi(e)})}function Ui(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),Ii(e,t))}function Yi(e,t){e._transitionClasses&&v(e._transitionClasses,t),ki(e,t)}function Ri(e,t,n){var i=Qi(e,t),r=i.type,o=i.timeout,s=i.propCount;if(!r)return n();var a=r===Li?Ei:$i,l=0,u=function(){e.removeEventListener(a,c),n()},c=function(t){t.target===e&&++l>=s&&u()};setTimeout(function(){l0&&(n=Li,c=s,h=o.length):t===Oi?u>0&&(n=Oi,c=u,h=l.length):h=(n=(c=Math.max(s,u))>0?s>u?Li:Oi:null)?n===Li?o.length:l.length:0,{type:n,timeout:c,propCount:h,hasTransform:n===Li&&Bi.test(i[Ai+"Property"])}}function Vi(e,t){for(;e.length1}function Ki(e,t){!0!==t.data.show&&Wi(t)}var Ji=function(e){var t,n,i={},l=e.modules,u=e.nodeOps;for(t=0;tf?b(e,r(n[v+1])?null:n[v+1].elm,n,p,v,i):p>v&&w(0,t,d,f)}(d,m,v,n,c):o(v)?(o(e.text)&&u.setTextContent(d,""),b(d,null,v,0,v.length-1,n)):o(m)?w(0,m,0,m.length-1):o(e.text)&&u.setTextContent(d,""):e.text!==t.text&&u.setTextContent(d,t.text),o(f)&&o(p=f.hook)&&o(p=p.postpatch)&&p(e,t)}}}function D(e,t,n){if(s(n)&&o(e.parent))e.parent.data.pendingInsert=t;else for(var i=0;i-1,s.selected!==o&&(s.selected=o);else if(O(ir(s),i))return void(e.selectedIndex!==a&&(e.selectedIndex=a));r||(e.selectedIndex=-1)}}function nr(e,t){return t.every(function(t){return!O(t,e)})}function ir(e){return"_value"in e?e._value:e.value}function rr(e){e.target.composing=!0}function or(e){e.target.composing&&(e.target.composing=!1,sr(e.target,"input"))}function sr(e,t){var n=document.createEvent("HTMLEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function ar(e){return!e.componentInstance||e.data&&e.data.transition?e:ar(e.componentInstance._vnode)}var lr={model:Xi,show:{bind:function(e,t,n){var i=t.value,r=(n=ar(n)).data&&n.data.transition,o=e.__vOriginalDisplay="none"===e.style.display?"":e.style.display;i&&r?(n.data.show=!0,Wi(n,function(){e.style.display=o})):e.style.display=i?o:"none"},update:function(e,t,n){var i=t.value;!i!=!t.oldValue&&((n=ar(n)).data&&n.data.transition?(n.data.show=!0,i?Wi(n,function(){e.style.display=e.__vOriginalDisplay}):Gi(n,function(){e.style.display="none"})):e.style.display=i?e.__vOriginalDisplay:"none")},unbind:function(e,t,n,i,r){r||(e.style.display=e.__vOriginalDisplay)}}},ur={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function cr(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?cr(ct(t.children)):e}function hr(e){var t={},n=e.$options;for(var i in n.propsData)t[i]=e[i];var r=n._parentListeners;for(var o in r)t[C(o)]=r[o];return t}function dr(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}var pr=function(e){return e.tag||ut(e)},fr=function(e){return"show"===e.name},mr={name:"transition",props:ur,abstract:!0,render:function(e){var t=this,n=this.$slots.default;if(n&&(n=n.filter(pr)).length){0;var i=this.mode;0;var r=n[0];if(function(e){for(;e=e.parent;)if(e.data.transition)return!0}(this.$vnode))return r;var o=cr(r);if(!o)return r;if(this._leaving)return dr(e,r);var s="__transition-"+this._uid+"-";o.key=null==o.key?o.isComment?s+"comment":s+o.tag:a(o.key)?0===String(o.key).indexOf(s)?o.key:s+o.key:o.key;var l=(o.data||(o.data={})).transition=hr(this),u=this._vnode,c=cr(u);if(o.data.directives&&o.data.directives.some(fr)&&(o.data.show=!0),c&&c.data&&!function(e,t){return t.key===e.key&&t.tag===e.tag}(o,c)&&!ut(c)&&(!c.componentInstance||!c.componentInstance._vnode.isComment)){var h=c.data.transition=k({},l);if("out-in"===i)return this._leaving=!0,rt(h,"afterLeave",function(){t._leaving=!1,t.$forceUpdate()}),dr(e,r);if("in-out"===i){if(ut(o))return u;var d,p=function(){d()};rt(l,"afterEnter",p),rt(l,"enterCancelled",p),rt(h,"delayLeave",function(e){d=e})}}return r}}},gr=k({tag:String,moveClass:String},ur);function vr(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function yr(e){e.data.newPos=e.elm.getBoundingClientRect()}function br(e){var t=e.data.pos,n=e.data.newPos,i=t.left-n.left,r=t.top-n.top;if(i||r){e.data.moved=!0;var o=e.elm.style;o.transform=o.WebkitTransform="translate("+i+"px,"+r+"px)",o.transitionDuration="0s"}}delete gr.mode;var Mr={Transition:mr,TransitionGroup:{props:gr,beforeMount:function(){var e=this,t=this._update;this._update=function(n,i){var r=bt(e);e.__patch__(e._vnode,e.kept,!1,!0),e._vnode=e.kept,r(),t.call(e,n,i)}},render:function(e){for(var t=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),i=this.prevChildren=this.children,r=this.$slots.default||[],o=this.children=[],s=hr(this),a=0;a-1?zn[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:zn[e]=/HTMLUnknownElement/.test(t.toString())},k(dn.options.directives,lr),k(dn.options.components,Mr),dn.prototype.__patch__=Q?Ji:T,dn.prototype.$mount=function(e,t){return function(e,t,n){var i;return e.$el=t,e.$options.render||(e.$options.render=fe),Ct(e,"beforeMount"),i=function(){e._update(e._render(),n)},new St(e,i,T,{before:function(){e._isMounted&&!e._isDestroyed&&Ct(e,"beforeUpdate")}},!0),n=!1,null==e.$vnode&&(e._isMounted=!0,Ct(e,"mounted")),e}(this,e=e&&Q?function(e){if("string"==typeof e){var t=document.querySelector(e);return t||document.createElement("div")}return e}(e):void 0,t)},Q&&setTimeout(function(){F.devtools&&ne&&ne.emit("init",dn)},0),t.a=dn}).call(this,n(16),n(74).setImmediate)},function(e,t,n){"use strict";n.d(t,"k",function(){return o}),n.d(t,"h",function(){return s}),n.d(t,"l",function(){return l}),n.d(t,"g",function(){return u}),n.d(t,"f",function(){return c}),n.d(t,"e",function(){return h}),n.d(t,"m",function(){return d}),n.d(t,"d",function(){return p}),n.d(t,"b",function(){return f}),n.d(t,"a",function(){return m}),n.d(t,"c",function(){return g}),n.d(t,"j",function(){return v}),n.d(t,"i",function(){return y});var i=n(2),r=Object.prototype.hasOwnProperty;function o(){}function s(e,t){return r.call(e,t)}function a(e,t){for(var n in t)e[n]=t[n];return e}function l(e){for(var t={},n=0;n0&&void 0!==arguments[0]?arguments[0]:"";return String(e).replace(/[|\\{}()[\]^$+*?.]/g,"\\$&")},f=function(e,t){for(var n=0;n!==e.length;++n)if(t(e[n]))return n;return-1},m=function(e,t){var n=f(e,t);return-1!==n?e[n]:void 0},g=function(e){return Array.isArray(e)?e:e?[e]:[]},v=function(){return!i.a.prototype.$isServer&&!isNaN(Number(document.documentMode))},y=function(){return!i.a.prototype.$isServer&&navigator.userAgent.indexOf("Edge")>-1}},function(e,t,n){"use strict";var i=n(44),r=n(2),o=n(60),s=n.n(o),a=n(3),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},u=/(%|)\{([0-9a-zA-Z_]+)\}/g;n.d(t,"b",function(){return f}),n.d(t,"c",function(){return m});var c=function(e){return function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),i=1;ii&&(n=i)),n!==r&&this.$emit("change",n)}},onMouseenter:function(e){this.disabled||("left"===e?this.quickprevIconClass="el-icon-d-arrow-left":this.quicknextIconClass="el-icon-d-arrow-right")}},computed:{pagers:function(){var e=this.pagerCount,t=(e-1)/2,n=Number(this.currentPage),i=Number(this.pageCount),r=!1,o=!1;i>e&&(n>e-t&&(r=!0),n0?n("li",{staticClass:"number",class:{active:1===e.currentPage,disabled:e.disabled}},[e._v("1")]):e._e(),e.showPrevMore?n("li",{staticClass:"el-icon more btn-quickprev",class:[e.quickprevIconClass,{disabled:e.disabled}],on:{mouseenter:function(t){e.onMouseenter("left")},mouseleave:function(t){e.quickprevIconClass="el-icon-more"}}}):e._e(),e._l(e.pagers,function(t){return n("li",{key:t,staticClass:"number",class:{active:e.currentPage===t,disabled:e.disabled}},[e._v(e._s(t))])}),e.showNextMore?n("li",{staticClass:"el-icon more btn-quicknext",class:[e.quicknextIconClass,{disabled:e.disabled}],on:{mouseenter:function(t){e.onMouseenter("right")},mouseleave:function(t){e.quicknextIconClass="el-icon-more"}}}):e._e(),e.pageCount>1?n("li",{staticClass:"number",class:{active:e.currentPage===e.pageCount,disabled:e.disabled}},[e._v(e._s(e.pageCount))]):e._e()],2)},[],!1,null,null,null);o.options.__file="pager.vue";var s=o.exports;var a={methods:{dispatch:function(e,t,n){for(var i=this.$parent||this.$root,r=i.$options.componentName;i&&(!r||r!==e);)(i=i.$parent)&&(r=i.$options.componentName);i&&i.$emit.apply(i,[t].concat(n))},broadcast:function(e,t,n){(function e(t,n,i){this.$children.forEach(function(r){r.$options.componentName===t?r.$emit.apply(r,[n].concat(i)):e.apply(r,[t,n].concat([i]))})}).call(this,e,t,n)}}},l=function(e){return{methods:{focus:function(){this.$refs[e].focus()}}}},u=n(4),c={methods:{t:function(){for(var e=arguments.length,t=Array(e),n=0;n1&&void 0!==arguments[1]?arguments[1]:1,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;d||(d=document.createElement("textarea"),document.body.appendChild(d));var i=function(e){var t=window.getComputedStyle(e),n=t.getPropertyValue("box-sizing"),i=parseFloat(t.getPropertyValue("padding-bottom"))+parseFloat(t.getPropertyValue("padding-top")),r=parseFloat(t.getPropertyValue("border-bottom-width"))+parseFloat(t.getPropertyValue("border-top-width"));return{contextStyle:f.map(function(e){return e+":"+t.getPropertyValue(e)}).join(";"),paddingSize:i,borderSize:r,boxSizing:n}}(e),r=i.paddingSize,o=i.borderSize,s=i.boxSizing,a=i.contextStyle;d.setAttribute("style",a+";"+p),d.value=e.value||e.placeholder||"";var l=d.scrollHeight,u={};"border-box"===s?l+=o:"content-box"===s&&(l-=r),d.value="";var c=d.scrollHeight-r;if(null!==t){var h=c*t;"border-box"===s&&(h=h+r+o),l=Math.max(h,l),u.minHeight=h+"px"}if(null!==n){var m=c*n;"border-box"===s&&(m=m+r+o),l=Math.min(m,l)}return u.height=l+"px",d.parentNode&&d.parentNode.removeChild(d),d=null,u}var g=function(e){for(var t=1,n=arguments.length;t0){var i=t[t.length-1];if(i.id===e){if(i.modalClass)i.modalClass.trim().split(/\s+/).forEach(function(e){return Object(C.g)(n,e)});t.pop(),t.length>0&&(n.style.zIndex=t[t.length-1].zIndex)}else for(var r=t.length-1;r>=0;r--)if(t[r].id===e){t.splice(r,1);break}}0===t.length&&(this.modalFade&&Object(C.a)(n,"v-modal-leave"),setTimeout(function(){0===t.length&&(n.parentNode&&n.parentNode.removeChild(n),n.style.display="none",k.modalDom=void 0),Object(C.g)(n,"v-modal-leave")},200))}};Object.defineProperty(k,"zIndex",{configurable:!0,get:function(){return N||(D=(w.a.prototype.$ELEMENT||{}).zIndex||D,N=!0),D},set:function(e){D=e}});w.a.prototype.$isServer||window.addEventListener("keydown",function(e){if(27===e.keyCode){var t=function(){if(!w.a.prototype.$isServer&&k.modalStack.length>0){var e=k.modalStack[k.modalStack.length-1];if(!e)return;return k.getInstance(e.id)}}();t&&t.closeOnPressEscape&&(t.handleClose?t.handleClose():t.handleAction?t.handleAction("cancel"):t.close())}});var j=k,T=void 0,S=function(){if(w.a.prototype.$isServer)return 0;if(void 0!==T)return T;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 n=document.createElement("div");n.style.width="100%",e.appendChild(n);var i=n.offsetWidth;return e.parentNode.removeChild(e),T=t-i},L=1,O=void 0,A={props:{visible:{type:Boolean,default:!1},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}},beforeMount:function(){this._popupId="popup-"+L++,j.register(this._popupId,this)},beforeDestroy:function(){j.deregister(this._popupId),j.closeModal(this._popupId),this.restoreBodyStyle()},data:function(){return{opened:!1,bodyPaddingRight:null,computedBodyPaddingRight:0,withoutHiddenClass:!0,rendered:!1}},watch:{visible:function(e){var t=this;if(e){if(this._opening)return;this.rendered?this.open():(this.rendered=!0,w.a.nextTick(function(){t.open()}))}else this.close()}},methods:{open:function(e){var t=this;this.rendered||(this.rendered=!0);var n=g({},this.$props||this,e);this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),clearTimeout(this._openTimer);var i=Number(n.openDelay);i>0?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(n)},i):this.doOpen(n)},doOpen:function(e){if(!this.$isServer&&(!this.willOpen||this.willOpen())&&!this.opened){this._opening=!0;var t=function e(t){return 3===t.nodeType&&e(t=t.nextElementSibling||t.nextSibling),t}(this.$el),n=e.modal,i=e.zIndex;if(i&&(j.zIndex=i),n&&(this._closing&&(j.closeModal(this._popupId),this._closing=!1),j.openModal(this._popupId,j.nextZIndex(),this.modalAppendToBody?void 0:t,e.modalClass,e.modalFade),e.lockScroll)){this.withoutHiddenClass=!Object(C.c)(document.body,"el-popup-parent--hidden"),this.withoutHiddenClass&&(this.bodyPaddingRight=document.body.style.paddingRight,this.computedBodyPaddingRight=parseInt(Object(C.b)(document.body,"paddingRight"),10)),O=S();var r=document.documentElement.clientHeight0&&(r||"scroll"===o)&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.computedBodyPaddingRight+O+"px"),Object(C.a)(document.body,"el-popup-parent--hidden")}"static"===getComputedStyle(t).position&&(t.style.position="absolute"),t.style.zIndex=j.nextZIndex(),this.opened=!0,this.onOpen&&this.onOpen(),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(){this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose()},doAfterClose:function(){j.closeModal(this._popupId),this._closing=!1},restoreBodyStyle:function(){this.modal&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.bodyPaddingRight,Object(C.g)(document.body,"el-popup-parent--hidden")),this.withoutHiddenClass=!0}}},E=w.a.prototype.$isServer?function(){}:n(76),z=function(e){return e.stopPropagation()},$={props:{transformOrigin:{type:[Boolean,String],default:!0},placement:{type:String,default:"bottom"},boundariesPadding:{type:Number,default:5},reference:{},popper:{},offset:{default:0},value:Boolean,visibleArrow:Boolean,arrowOffset:{type:Number,default:35},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){this.disabled||(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,n=this.popperElm=this.popperElm||this.popper||this.$refs.popper,i=this.referenceElm=this.referenceElm||this.reference||this.$refs.reference;!i&&this.$slots.reference&&this.$slots.reference[0]&&(i=this.referenceElm=this.$slots.reference[0].elm),n&&i&&(this.visibleArrow&&this.appendArrow(n),this.appendToBody&&document.body.appendChild(this.popperElm),this.popperJS&&this.popperJS.destroy&&this.popperJS.destroy(),t.placement=this.currentPlacement,t.offset=this.offset,t.arrowOffset=this.arrowOffset,this.popperJS=new E(i,n,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=j.nextZIndex(),this.popperElm.addEventListener("click",z))}},updatePopper:function(){var e=this.popperJS;e?(e.update(),e._popper&&(e._popper.style.zIndex=j.nextZIndex())):this.createPopper()},doDestroy:function(e){!this.popperJS||this.showPopper&&!e||(this.popperJS.destroy(),this.popperJS=null)},destroyPopper:function(){this.popperJS&&this.resetTransformOrigin()},resetTransformOrigin:function(){if(this.transformOrigin){var e=this.popperJS._popper.getAttribute("x-placement").split("-")[0],t={top:"bottom",bottom:"top",left:"right",right:"left"}[e];this.popperJS._popper.style.transformOrigin="string"==typeof this.transformOrigin?this.transformOrigin:["top","bottom"].indexOf(e)>-1?"center "+t:t+" center"}},appendArrow:function(e){var t=void 0;if(!this.appended){for(var n in this.appended=!0,e.attributes)if(/^_v-/.test(e.attributes[n].name)){t=e.attributes[n].name;break}var i=document.createElement("div");t&&i.setAttribute(t,""),i.setAttribute("x-arrow",""),i.className="popper__arrow",e.appendChild(i)}}},beforeDestroy:function(){this.doDestroy(!0),this.popperElm&&this.popperElm.parentNode===document.body&&(this.popperElm.removeEventListener("click",z),document.body.removeChild(this.popperElm))},deactivated:function(){this.$options.beforeDestroy[0].call(this)}},P={name:"ElSelectDropdown",componentName:"ElSelectDropdown",mixins:[$],props:{placement:{default:"bottom-start"},boundariesPadding:{default:0},popperOptions:{default:function(){return{gpuAcceleration:!1}}},visibleArrow:{default:!0},appendToBody:{type:Boolean,default:!0}},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(){var e=this;this.referenceElm=this.$parent.$refs.reference.$el,this.$parent.popperElm=this.popperElm=this.$el,this.$on("updatePopper",function(){e.$parent.visible&&e.updatePopper()}),this.$on("destroyPopper",this.destroyPopper)}},F=Object(r.a)(P,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-select-dropdown el-popper",class:[{"is-multiple":this.$parent.multiple},this.popperClass],style:{minWidth:this.minWidth}},[this._t("default")],2)},[],!1,null,null,null);F.options.__file="select-dropdown.vue";var U=F.exports,Y=n(3),R="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},B={mixins:[a],name:"ElOption",componentName:"ElOption",inject:["select"],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,hover:!1}},computed:{isObject:function(){return"[object object]"===Object.prototype.toString.call(this.value).toLowerCase()},currentLabel:function(){return this.label||(this.isObject?"":this.value)},currentValue:function(){return this.value||this.label||""},itemSelected:function(){return this.select.multiple?this.contains(this.select.value,this.value):this.isEqual(this.value,this.select.value)},limitReached:function(){return!!this.select.multiple&&(!this.itemSelected&&(this.select.value||[]).length>=this.select.multipleLimit&&this.select.multipleLimit>0)}},watch:{currentLabel:function(){this.created||this.select.remote||this.dispatch("ElSelect","setSelected")},value:function(e,t){var n=this.select,i=n.remote,r=n.valueKey;if(!this.created&&!i){if(r&&"object"===(void 0===e?"undefined":R(e))&&"object"===(void 0===t?"undefined":R(t))&&e[r]===t[r])return;this.dispatch("ElSelect","setSelected")}}},methods:{isEqual:function(e,t){if(this.isObject){var n=this.select.valueKey;return Object(Y.g)(e,n)===Object(Y.g)(t,n)}return e===t},contains:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1];if(this.isObject){var n=this.select.valueKey;return e.some(function(e){return Object(Y.g)(e,n)===Object(Y.g)(t,n)})}return e.indexOf(t)>-1},handleGroupDisabled:function(e){this.groupDisabled=e},hoverItem:function(){this.disabled||this.groupDisabled||(this.select.hoverIndex=this.select.options.indexOf(this))},selectOptionClick:function(){!0!==this.disabled&&!0!==this.groupDisabled&&this.dispatch("ElSelect","handleOptionClick",[this,!0])},queryChange:function(e){this.visible=new RegExp(Object(Y.d)(e),"i").test(this.currentLabel)||this.created,this.visible||this.select.filteredOptionsCount--}},created:function(){this.select.options.push(this),this.select.cachedOptions.push(this),this.select.optionsCount++,this.select.filteredOptionsCount++,this.$on("queryChange",this.queryChange),this.$on("handleGroupDisabled",this.handleGroupDisabled)},beforeDestroy:function(){this.select.onOptionDestroy(this.select.options.indexOf(this))}},Q=Object(r.a)(B,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("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.hover},on:{mouseenter:e.hoverItem,click:function(t){return t.stopPropagation(),e.selectOptionClick(t)}}},[e._t("default",[n("span",[e._v(e._s(e.currentLabel))])])],2)},[],!1,null,null,null);Q.options.__file="option.vue";var V=Q.exports,H={name:"ElTag",props:{text:String,closable:Boolean,type:String,hit:Boolean,disableTransitions:Boolean,color:String,size:String},methods:{handleClose:function(e){e.stopPropagation(),this.$emit("close",e)},handleClick:function(e){e.stopPropagation(),this.$emit("click",e)}},computed:{tagSize:function(){return this.size||(this.$ELEMENT||{}).size}},render:function(e){var t=e("span",{class:["el-tag",this.type?"el-tag--"+this.type:"",this.tagSize?"el-tag--"+this.tagSize:"",{"is-hit":this.hit}],style:{backgroundColor:this.color},on:{click:this.handleClick}},[this.$slots.default,this.closable&&e("i",{class:"el-tag__close el-icon-close",on:{click:this.handleClose}})]);return this.disableTransitions?t:e("transition",{attrs:{name:"el-zoom-in-center"}},[t])}},W=Object(r.a)(H,void 0,void 0,!1,null,null,null);W.options.__file="tag.vue";var G=W.exports;G.install=function(e){e.component(G.name,G)};var q=G,Z=n(61),K="undefined"==typeof window,J=function(e){var t=e,n=Array.isArray(t),i=0;for(t=n?t:t[Symbol.iterator]();;){var r;if(n){if(i>=t.length)break;r=t[i++]}else{if((i=t.next()).done)break;r=i.value}var o=r.target.__resizeListeners__||[];o.length&&o.forEach(function(e){e()})}},X=function(e,t){K||(e.__resizeListeners__||(e.__resizeListeners__=[],e.__ro__=new Z.a(J),e.__ro__.observe(e)),e.__resizeListeners__.push(t))},ee=function(e,t){e&&e.__resizeListeners__&&(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||e.__ro__.disconnect())},te={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 ne(e){var t=e.move,n=e.size,i=e.bar,r={},o="translate"+i.axis+"("+t+"%)";return r[i.size]=n,r.transform=o,r.msTransform=o,r.webkitTransform=o,r}var ie={name:"Bar",props:{vertical:Boolean,size:String,move:Number},computed:{bar:function(){return te[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap}},render:function(e){var t=this.size,n=this.move,i=this.bar;return e("div",{class:["el-scrollbar__bar","is-"+i.key],on:{mousedown:this.clickTrackHandler}},[e("div",{ref:"thumb",class:"el-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:ne({size:t,move:n,bar:i})})])},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=100*(Math.abs(e.target.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-this.$refs.thumb[this.bar.offset]/2)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=t*this.wrap[this.bar.scrollSize]/100},startDrag:function(e){e.stopImmediatePropagation(),this.cursorDown=!0,Object(C.e)(document,"mousemove",this.mouseMoveDocumentHandler),Object(C.e)(document,"mouseup",this.mouseUpDocumentHandler),document.onselectstart=function(){return!1}},mouseMoveDocumentHandler:function(e){if(!1!==this.cursorDown){var t=this[this.bar.axis];if(t){var n=100*(-1*(this.$el.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-(this.$refs.thumb[this.bar.offset]-t))/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=n*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(e){this.cursorDown=!1,this[this.bar.axis]=0,Object(C.d)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){Object(C.d)(document,"mouseup",this.mouseUpDocumentHandler)}},re={name:"ElScrollbar",components:{Bar:ie},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=S(),n=this.wrapStyle;if(t){var i="-"+t+"px",r="margin-bottom: "+i+"; margin-right: "+i+";";Array.isArray(this.wrapStyle)?(n=Object(Y.l)(this.wrapStyle)).marginRight=n.marginBottom=i:"string"==typeof this.wrapStyle?n+=r:n=r}var o=e(this.tag,{class:["el-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),s=e("div",{ref:"wrap",style:n,on:{scroll:this.handleScroll},class:[this.wrapClass,"el-scrollbar__wrap",t?"":"el-scrollbar__wrap--hidden-default"]},[[o]]),a=void 0;return a=this.native?[e("div",{ref:"wrap",class:[this.wrapClass,"el-scrollbar__wrap"],style:n},[[o]])]:[s,e(ie,{attrs:{move:this.moveX,size:this.sizeWidth}}),e(ie,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight}})],e("div",{class:"el-scrollbar"},a)},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,t,n=this.wrap;n&&(e=100*n.clientHeight/n.scrollHeight,t=100*n.clientWidth/n.scrollWidth,this.sizeHeight=e<100?e+"%":"",this.sizeWidth=t<100?t+"%":"")}},mounted:function(){this.native||(this.$nextTick(this.update),!this.noresize&&X(this.$refs.resize,this.update))},beforeDestroy:function(){this.native||!this.noresize&&ee(this.$refs.resize,this.update)},install:function(e){e.component(re.name,re)}},oe=re,se=n(5),ae=n.n(se),le=[],ue="@@clickoutsideContext",ce=void 0,he=0;function de(e,t,n){return function(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!(n&&n.context&&i.target&&r.target)||e.contains(i.target)||e.contains(r.target)||e===i.target||n.context.popperElm&&(n.context.popperElm.contains(i.target)||n.context.popperElm.contains(r.target))||(t.expression&&e[ue].methodName&&n.context[e[ue].methodName]?n.context[e[ue].methodName]():e[ue].bindingFn&&e[ue].bindingFn())}}!w.a.prototype.$isServer&&Object(C.e)(document,"mousedown",function(e){return ce=e}),!w.a.prototype.$isServer&&Object(C.e)(document,"mouseup",function(e){le.forEach(function(t){return t[ue].documentHandler(e,ce)})});var pe={bind:function(e,t,n){le.push(e);var i=he++;e[ue]={id:i,documentHandler:de(e,t,n),methodName:t.expression,bindingFn:t.value}},update:function(e,t,n){e[ue].documentHandler=de(e,t,n),e[ue].methodName=t.expression,e[ue].bindingFn=t.value},unbind:function(e){for(var t=le.length,n=0;na&&(e.scrollTop=o-e.clientHeight)}else e.scrollTop=0}var me={mixins:[a,c,l("reference"),{data:function(){return{hoverOption:-1}},computed:{optionsAllDisabled:function(){return this.options.filter(function(e){return e.visible}).every(function(e){return e.disabled})}},watch:{hoverIndex:function(e){var t=this;"number"==typeof e&&e>-1&&(this.hoverOption=this.options[e]||{}),this.options.forEach(function(e){e.hover=t.hoverOption===e})}},methods:{navigateOptions:function(e){var t=this;if(this.visible){if(0!==this.options.length&&0!==this.filteredOptionsCount&&!this.optionsAllDisabled){"next"===e?(this.hoverIndex++,this.hoverIndex===this.options.length&&(this.hoverIndex=0)):"prev"===e&&(this.hoverIndex--,this.hoverIndex<0&&(this.hoverIndex=this.options.length-1));var n=this.options[this.hoverIndex];!0!==n.disabled&&!0!==n.groupDisabled&&n.visible||this.navigateOptions(e),this.$nextTick(function(){return t.scrollToOption(t.hoverOption)})}}else this.visible=!0}}}],name:"ElSelect",componentName:"ElSelect",inject:{elForm:{default:""},elFormItem:{default:""}},provide:function(){return{select:this}},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},readonly:function(){return!this.filterable||this.multiple||!Object(Y.j)()&&!Object(Y.i)()&&!this.visible},showClose:function(){var e=this.multiple?Array.isArray(this.value)&&this.value.length>0:void 0!==this.value&&null!==this.value&&""!==this.value;return this.clearable&&!this.selectDisabled&&this.inputHovering&&e},iconClass:function(){return this.remote&&this.filterable?"":this.visible?"arrow-up is-reverse":"arrow-up"},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.query&&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},selectSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},selectDisabled:function(){return this.disabled||(this.elForm||{}).disabled},collapseTagSize:function(){return["small","mini"].indexOf(this.selectSize)>-1?"mini":"small"}},components:{ElInput:M,ElSelectMenu:U,ElOption:V,ElTag:q,ElScrollbar:oe},directives:{Clickoutside:pe},props:{name:String,id:String,value:{required:!0},autocomplete:{type:String,default:"off"},autoComplete:{type:String,validator:function(e){return!0}},automaticDropdown:Boolean,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 Object(u.b)("el.select.placeholder")}},defaultFirstOption:Boolean,reserveKeyword:Boolean,valueKey:{type:String,default:"value"},collapseTags:Boolean,popperAppendToBody:{type:Boolean,default:!0}},data:function(){return{options:[],cachedOptions:[],createdLabel:null,createdSelected:!1,selected:this.multiple?[]:{},inputLength:20,inputWidth:0,initialInputHeight:0,cachedPlaceHolder:"",optionsCount:0,filteredOptionsCount:0,visible:!1,softFocus:!1,selectedLabel:"",hoverIndex:-1,query:"",previousQuery:null,inputHovering:!1,currentPlaceholder:"",menuVisibleOnFocus:!1,isOnComposition:!1,isSilentBlur:!1}},watch:{selectDisabled:function(){var e=this;this.$nextTick(function(){e.resetInputHeight()})},placeholder:function(e){this.cachedPlaceHolder=this.currentPlaceholder=e},value:function(e,t){this.multiple&&(this.resetInputHeight(),e.length>0||this.$refs.input&&""!==this.query?this.currentPlaceholder="":this.currentPlaceholder=this.cachedPlaceHolder,this.filterable&&!this.reserveKeyword&&(this.query="",this.handleQueryChange(this.query))),this.setSelected(),this.filterable&&!this.multiple&&(this.inputLength=20),Object(Y.m)(e,t)||this.dispatch("ElFormItem","el.form.change",e)},visible:function(e){var t=this;e?(this.broadcast("ElSelectDropdown","updatePopper"),this.filterable&&(this.query=this.remote?"":this.selectedLabel,this.handleQueryChange(this.query),this.multiple?this.$refs.input.focus():(this.remote||(this.broadcast("ElOption","queryChange",""),this.broadcast("ElOptionGroup","queryChange")),this.broadcast("ElInput","inputSelect")))):(this.broadcast("ElSelectDropdown","destroyPopper"),this.$refs.input&&this.$refs.input.blur(),this.query="",this.previousQuery=null,this.selectedLabel="",this.inputLength=20,this.menuVisibleOnFocus=!1,this.resetHoverIndex(),this.$nextTick(function(){t.$refs.input&&""===t.$refs.input.value&&0===t.selected.length&&(t.currentPlaceholder=t.cachedPlaceHolder)}),this.multiple||this.selected&&(this.filterable&&this.allowCreate&&this.createdSelected&&this.createdLabel?this.selectedLabel=this.createdLabel:this.selectedLabel=this.selected.currentLabel,this.filterable&&(this.query=this.selectedLabel))),this.$emit("visible-change",e)},options:function(){var e=this;if(!this.$isServer){this.$nextTick(function(){e.broadcast("ElSelectDropdown","updatePopper")}),this.multiple&&this.resetInputHeight();var t=this.$el.querySelectorAll("input");-1===[].indexOf.call(t,document.activeElement)&&this.setSelected(),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}}},methods:{handleComposition:function(e){var t=e.target.value;if("compositionend"===e.type)this.isOnComposition=!1,this.handleQueryChange(t);else{var n=t[t.length-1]||"";this.isOnComposition=!function(e){return/([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(e)}(n)}},handleQueryChange:function(e){var t=this;if(this.previousQuery!==e&&!this.isOnComposition)if(null!==this.previousQuery||"function"!=typeof this.filterMethod&&"function"!=typeof this.remoteMethod){if(this.previousQuery=e,this.$nextTick(function(){t.visible&&t.broadcast("ElSelectDropdown","updatePopper")}),this.hoverIndex=-1,this.multiple&&this.filterable){var n=15*this.$refs.input.value.length+20;this.inputLength=this.collapseTags?Math.min(50,n):n,this.managePlaceholder(),this.resetInputHeight()}this.remote&&"function"==typeof this.remoteMethod?(this.hoverIndex=-1,this.remoteMethod(e)):"function"==typeof this.filterMethod?(this.filterMethod(e),this.broadcast("ElOptionGroup","queryChange")):(this.filteredOptionsCount=this.optionsCount,this.broadcast("ElOption","queryChange",e),this.broadcast("ElOptionGroup","queryChange")),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}else this.previousQuery=e},scrollToOption:function(e){var t=Array.isArray(e)&&e[0]?e[0].$el:e.$el;this.$refs.popper&&t&&fe(this.$refs.popper.$el.querySelector(".el-select-dropdown__wrap"),t);this.$refs.scrollbar&&this.$refs.scrollbar.handleScroll()},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.scrollToOption(e.selected)})},emitChange:function(e){Object(Y.m)(this.value,e)||this.$emit("change",e)},getOption:function(e){for(var t=void 0,n="[object object]"===Object.prototype.toString.call(e).toLowerCase(),i="[object null]"===Object.prototype.toString.call(e).toLowerCase(),r=this.cachedOptions.length-1;r>=0;r--){var o=this.cachedOptions[r];if(n?Object(Y.g)(o.value,this.valueKey)===Object(Y.g)(e,this.valueKey):o.value===e){t=o;break}}if(t)return t;var s={value:e,currentLabel:n||i?"":e};return this.multiple&&(s.hitState=!1),s},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 n=[];Array.isArray(this.value)&&this.value.forEach(function(t){n.push(e.getOption(t))}),this.selected=n,this.$nextTick(function(){e.resetInputHeight()})},handleFocus:function(e){this.softFocus?this.softFocus=!1:((this.automaticDropdown||this.filterable)&&(this.visible=!0,this.menuVisibleOnFocus=!0),this.$emit("focus",e))},blur:function(){this.visible=!1,this.$refs.reference.blur()},handleBlur:function(e){var t=this;setTimeout(function(){t.isSilentBlur?t.isSilentBlur=!1:t.$emit("blur",e)},50),this.softFocus=!1},handleClearClick:function(e){this.deleteSelected(e)},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!0===e||!1===e?(t.hitState=e,e):(t.hitState=!t.hitState,t.hitState)}},deletePrevTag:function(e){if(e.target.value.length<=0&&!this.toggleLastOptionHitState()){var t=this.value.slice();t.pop(),this.$emit("input",t),this.emitChange(t)}},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.collapseTags&&!this.filterable||this.$nextTick(function(){if(e.$refs.reference){var t=e.$refs.reference.$el.childNodes,n=[].filter.call(t,function(e){return"INPUT"===e.tagName})[0],i=e.$refs.tags,r=e.initialInputHeight||40;n.style.height=0===e.selected.length?r+"px":Math.max(i?i.clientHeight+(i.clientHeight>r?6:0):0,r)+"px",e.visible&&!1!==e.emptyText&&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,t){var n=this;if(this.multiple){var i=this.value.slice(),r=this.getValueIndex(i,e.value);r>-1?i.splice(r,1):(this.multipleLimit<=0||i.length0&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1];if("[object object]"===Object.prototype.toString.call(t).toLowerCase()){var n=this.valueKey,i=-1;return e.some(function(e,r){return Object(Y.g)(e,n)===Object(Y.g)(t,n)&&(i=r,!0)}),i}return e.indexOf(t)},toggleMenu:function(){this.selectDisabled||(this.menuVisibleOnFocus?this.menuVisibleOnFocus=!1:this.visible=!this.visible,this.visible&&(this.$refs.input||this.$refs.reference).focus())},selectOption:function(){this.visible?this.options[this.hoverIndex]&&this.handleOptionSelect(this.options[this.hoverIndex]):this.toggleMenu()},deleteSelected:function(e){e.stopPropagation();var t=this.multiple?[]:"";this.$emit("input",t),this.emitChange(t),this.visible=!1,this.$emit("clear")},deleteTag:function(e,t){var n=this.selected.indexOf(t);if(n>-1&&!this.selectDisabled){var i=this.value.slice();i.splice(n,1),this.$emit("input",i),this.emitChange(i),this.$emit("remove-tag",t.value)}e.stopPropagation()},onInputChange:function(){this.filterable&&this.query!==this.selectedLabel&&(this.query=this.selectedLabel,this.handleQueryChange(this.query))},onOptionDestroy:function(e){e>-1&&(this.optionsCount--,this.filteredOptionsCount--,this.options.splice(e,1))},resetInputWidth:function(){this.inputWidth=this.$refs.reference.$el.getBoundingClientRect().width},handleResize:function(){this.resetInputWidth(),this.multiple&&this.resetInputHeight()},checkDefaultFirstOption:function(){this.hoverIndex=-1;for(var e=!1,t=this.options.length-1;t>=0;t--)if(this.options[t].created){e=!0,this.hoverIndex=t;break}if(!e)for(var n=0;n!==this.options.length;++n){var i=this.options[n];if(this.query){if(!i.disabled&&!i.groupDisabled&&i.visible){this.hoverIndex=n;break}}else if(i.itemSelected){this.hoverIndex=n;break}}},getValueKey:function(e){return"[object object]"!==Object.prototype.toString.call(e.value).toLowerCase()?e.value:Object(Y.g)(e.value,this.valueKey)}},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.debouncedOnInputChange=ae()(this.debounce,function(){e.onInputChange()}),this.debouncedQueryChange=ae()(this.debounce,function(t){e.handleQueryChange(t.target.value)}),this.$on("handleOptionClick",this.handleOptionSelect),this.$on("setSelected",this.setSelected)},mounted:function(){var e=this;this.multiple&&Array.isArray(this.value)&&this.value.length>0&&(this.currentPlaceholder=""),X(this.$el,this.handleResize);var t=this.$refs.reference;if(t&&t.$el){this.initialInputHeight=t.$el.getBoundingClientRect().height||{medium:36,small:32,mini:28}[this.selectSize]}this.remote&&this.multiple&&this.resetInputHeight(),this.$nextTick(function(){t&&t.$el&&(e.inputWidth=t.$el.getBoundingClientRect().width)}),this.setSelected()},beforeDestroy:function(){this.$el&&this.handleResize&&ee(this.$el,this.handleResize)}},ge=Object(r.a)(me,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClose,expression:"handleClose"}],staticClass:"el-select",class:[e.selectSize?"el-select--"+e.selectSize:""],on:{click:function(t){return t.stopPropagation(),e.toggleMenu(t)}}},[e.multiple?n("div",{ref:"tags",staticClass:"el-select__tags",style:{"max-width":e.inputWidth-32+"px",width:"100%"}},[e.collapseTags&&e.selected.length?n("span",[n("el-tag",{attrs:{closable:!e.selectDisabled,size:e.collapseTagSize,hit:e.selected[0].hitState,type:"info","disable-transitions":""},on:{close:function(t){e.deleteTag(t,e.selected[0])}}},[n("span",{staticClass:"el-select__tags-text"},[e._v(e._s(e.selected[0].currentLabel))])]),e.selected.length>1?n("el-tag",{attrs:{closable:!1,size:e.collapseTagSize,type:"info","disable-transitions":""}},[n("span",{staticClass:"el-select__tags-text"},[e._v("+ "+e._s(e.selected.length-1))])]):e._e()],1):e._e(),e.collapseTags?e._e():n("transition-group",{on:{"after-leave":e.resetInputHeight}},e._l(e.selected,function(t){return n("el-tag",{key:e.getValueKey(t),attrs:{closable:!e.selectDisabled,size:e.collapseTagSize,hit:t.hitState,type:"info","disable-transitions":""},on:{close:function(n){e.deleteTag(n,t)}}},[n("span",{staticClass:"el-select__tags-text"},[e._v(e._s(t.currentLabel))])])}),1),e.filterable?n("input",{directives:[{name:"model",rawName:"v-model",value:e.query,expression:"query"}],ref:"input",staticClass:"el-select__input",class:[e.selectSize?"is-"+e.selectSize:""],style:{"flex-grow":"1",width:e.inputLength/(e.inputWidth-32)+"%","max-width":e.inputWidth-42+"px"},attrs:{type:"text",disabled:e.selectDisabled,autocomplete:e.autoComplete||e.autocomplete},domProps:{value:e.query},on:{focus:e.handleFocus,blur:function(t){e.softFocus=!1},click:function(e){e.stopPropagation()},keyup:e.managePlaceholder,keydown:[e.resetInputState,function(t){if(!("button"in t)&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"]))return null;t.preventDefault(),e.navigateOptions("next")},function(t){if(!("button"in t)&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"]))return null;t.preventDefault(),e.navigateOptions("prev")},function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?(t.preventDefault(),e.selectOption(t)):null},function(t){if(!("button"in t)&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"]))return null;t.stopPropagation(),t.preventDefault(),e.visible=!1},function(t){return"button"in t||!e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?e.deletePrevTag(t):null}],compositionstart:e.handleComposition,compositionupdate:e.handleComposition,compositionend:e.handleComposition,input:[function(t){t.target.composing||(e.query=t.target.value)},e.debouncedQueryChange]}}):e._e()],1):e._e(),n("el-input",{ref:"reference",class:{"is-focus":e.visible},attrs:{type:"text",placeholder:e.currentPlaceholder,name:e.name,id:e.id,autocomplete:e.autoComplete||e.autocomplete,size:e.selectSize,disabled:e.selectDisabled,readonly:e.readonly,"validate-event":!1},on:{focus:e.handleFocus,blur:e.handleBlur},nativeOn:{keyup:function(t){return e.debouncedOnInputChange(t)},keydown:[function(t){if(!("button"in t)&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"]))return null;t.stopPropagation(),t.preventDefault(),e.navigateOptions("next")},function(t){if(!("button"in t)&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"]))return null;t.stopPropagation(),t.preventDefault(),e.navigateOptions("prev")},function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?(t.preventDefault(),e.selectOption(t)):null},function(t){if(!("button"in t)&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"]))return null;t.stopPropagation(),t.preventDefault(),e.visible=!1},function(t){if(!("button"in t)&&e._k(t.keyCode,"tab",9,t.key,"Tab"))return null;e.visible=!1}],paste:function(t){return 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"}},[e.$slots.prefix?n("template",{slot:"prefix"},[e._t("prefix")],2):e._e(),n("template",{slot:"suffix"},[n("i",{directives:[{name:"show",rawName:"v-show",value:!e.showClose,expression:"!showClose"}],class:["el-select__caret","el-input__icon","el-icon-"+e.iconClass]}),e.showClose?n("i",{staticClass:"el-select__caret el-input__icon el-icon-circle-close",on:{click:e.handleClearClick}}):e._e()])],2),n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":e.handleMenuEnter,"after-leave":e.doDestroy}},[n("el-select-menu",{directives:[{name:"show",rawName:"v-show",value:e.visible&&!1!==e.emptyText,expression:"visible && emptyText !== false"}],ref:"popper",attrs:{"append-to-body":e.popperAppendToBody}},[n("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:e.options.length>0&&!e.loading,expression:"options.length > 0 && !loading"}],ref:"scrollbar",class:{"is-empty":!e.allowCreate&&e.query&&0===e.filteredOptionsCount},attrs:{tag:"ul","wrap-class":"el-select-dropdown__wrap","view-class":"el-select-dropdown__list"}},[e.showNewOption?n("el-option",{attrs:{value:e.query,created:""}}):e._e(),e._t("default")],2),e.emptyText&&(!e.allowCreate||e.loading||e.allowCreate&&0===e.options.length)?n("p",{staticClass:"el-select-dropdown__empty"},[e._v("\n "+e._s(e.emptyText)+"\n ")]):e._e()],1)],1)],1)},[],!1,null,null,null);ge.options.__file="select.vue";var ve=ge.exports;ve.install=function(e){e.component(ve.name,ve)};var ye=ve;V.install=function(e){e.component(V.name,V)};var be=V,Me={name:"ElPagination",props:{pageSize:{type:Number,default:10},small:Boolean,total:Number,pageCount:Number,pagerCount:{type:Number,validator:function(e){return(0|e)===e&&e>4&&e<22&&e%2==1},default:7},currentPage:{type:Number,default:1},layout:{default:"prev, pager, next, jumper, ->, total"},pageSizes:{type:Array,default:function(){return[10,20,30,40,50,100]}},popperClass:String,prevText:String,nextText:String,background:Boolean,disabled:Boolean},data:function(){return{internalCurrentPage:1,internalPageSize:0,lastEmittedPage:-1,userChangePageSize:!1}},render:function(e){var t=e("div",{class:["el-pagination",{"is-background":this.background,"el-pagination--small":this.small}]}),n=this.layout||"";if(n){var i={prev:e("prev"),jumper:e("jumper"),pager:e("pager",{attrs:{currentPage:this.internalCurrentPage,pageCount:this.internalPageCount,pagerCount:this.pagerCount,disabled:this.disabled},on:{change:this.handleCurrentChange}}),next:e("next"),sizes:e("sizes",{attrs:{pageSizes:this.pageSizes}}),slot:e("my-slot"),total:e("total")},r=n.split(",").map(function(e){return e.trim()}),o=e("div",{class:"el-pagination__rightwrapper"}),s=!1;return t.children=t.children||[],o.children=o.children||[],r.forEach(function(e){"->"!==e?s?o.children.push(i[e]):t.children.push(i[e]):s=!0}),s&&t.children.unshift(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",disabled:this.$parent.disabled||this.$parent.internalCurrentPage<=1},class:"btn-prev",on:{click:this.$parent.prev}},[this.$parent.prevText?e("span",[this.$parent.prevText]):e("i",{class:"el-icon el-icon-arrow-left"})])}},Next:{render:function(e){return e("button",{attrs:{type:"button",disabled:this.$parent.disabled||this.$parent.internalCurrentPage===this.$parent.internalPageCount||0===this.$parent.internalPageCount},class:"btn-next",on:{click:this.$parent.next}},[this.$parent.nextText?e("span",[this.$parent.nextText]):e("i",{class:"el-icon el-icon-arrow-right"})])}},Sizes:{mixins:[c],props:{pageSizes:Array},watch:{pageSizes:{immediate:!0,handler:function(e,t){Object(Y.m)(e,t)||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,popperClass:this.$parent.popperClass||"",size:"mini",disabled:this.$parent.disabled},on:{input:this.handleChange}},[this.pageSizes.map(function(n){return e("el-option",{attrs:{value:n,label:n+t.t("el.pagination.pagesize")}})})])])},components:{ElSelect:ye,ElOption:be},methods:{handleChange:function(e){e!==this.$parent.internalPageSize&&(this.$parent.internalPageSize=e=parseInt(e,10),this.$parent.userChangePageSize=!0,this.$parent.$emit("update:pageSize",e),this.$parent.$emit("size-change",e))}}},Jumper:{mixins:[c],components:{ElInput:M},data:function(){return{userInput:null}},watch:{"$parent.internalCurrentPage":function(){this.userInput=null}},methods:{handleKeyup:function(e){var t=e.keyCode,n=e.target;13===t&&this.handleChange(n.value)},handleInput:function(e){this.userInput=e},handleChange:function(e){this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(e),this.$parent.emitChange(),this.userInput=null}},render:function(e){return e("span",{class:"el-pagination__jump"},[this.t("el.pagination.goto"),e("el-input",{class:"el-pagination__editor is-in-pagination",attrs:{min:1,max:this.$parent.internalPageCount,value:null!==this.userInput?this.userInput:this.$parent.internalCurrentPage,type:"number",disabled:this.$parent.disabled},nativeOn:{keyup:this.handleKeyup},on:{input:this.handleInput,change:this.handleChange}}),this.t("el.pagination.pageClassifier")])}},Total:{mixins:[c],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:s},methods:{handleCurrentChange:function(e){this.internalCurrentPage=this.getValidCurrentPage(e),this.userChangePageSize=!0,this.emitChange()},prev:function(){if(!this.disabled){var e=this.internalCurrentPage-1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("prev-click",this.internalCurrentPage),this.emitChange()}},next:function(){if(!this.disabled){var e=this.internalCurrentPage+1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("next-click",this.internalCurrentPage),this.emitChange()}},getValidCurrentPage:function(e){e=parseInt(e,10);var t=void 0;return"number"==typeof this.internalPageCount?e<1?t=1:e>this.internalPageCount&&(t=this.internalPageCount):(isNaN(e)||e<1)&&(t=1),void 0===t&&isNaN(e)?t=1:0===t&&(t=1),void 0===t?e:t},emitChange:function(){var e=this;this.$nextTick(function(){(e.internalCurrentPage!==e.lastEmittedPage||e.userChangePageSize)&&(e.$emit("current-change",e.internalCurrentPage),e.lastEmittedPage=e.internalCurrentPage,e.userChangePageSize=!1)})}},computed:{internalPageCount:function(){return"number"==typeof this.total?Math.max(1,Math.ceil(this.total/this.internalPageSize)):"number"==typeof this.pageCount?Math.max(1,this.pageCount):null}},watch:{currentPage:{immediate:!0,handler:function(e){this.internalCurrentPage=this.getValidCurrentPage(e)}},pageSize:{immediate:!0,handler:function(e){this.internalPageSize=isNaN(e)?10:e}},internalCurrentPage:{immediate:!0,handler:function(e){this.$emit("update:currentPage",e),this.lastEmittedPage=-1}},internalPageCount:function(e){var t=this.internalCurrentPage;e>0&&0===t?this.internalCurrentPage=1:t>e&&(this.internalCurrentPage=0===e?1:e,this.userChangePageSize&&this.emitChange()),this.userChangePageSize=!1}},install:function(e){e.component(Me.name,Me)}},we=Me,Ce={name:"ElDialog",mixins:[A,a,h],props:{title:{type:String,default:""},modal:{type:Boolean,default:!0},modalAppendToBody:{type:Boolean,default:!0},appendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},width:String,fullscreen:Boolean,customClass:{type:String,default:""},top:{type:String,default:"15vh"},beforeClose:Function,center:{type:Boolean,default:!1}},data:function(){return{closed:!1}},watch:{visible:function(e){var t=this;e?(this.closed=!1,this.$emit("open"),this.$el.addEventListener("scroll",this.updatePopper),this.$nextTick(function(){t.$refs.dialog.scrollTop=0}),this.appendToBody&&document.body.appendChild(this.$el)):(this.$el.removeEventListener("scroll",this.updatePopper),this.closed||this.$emit("close"))}},computed:{style:function(){var e={};return this.fullscreen||(e.marginTop=this.top,this.width&&(e.width=this.width)),e}},methods:{getMigratingConfig:function(){return{props:{size:"size is removed."}}},handleWrapperClick:function(){this.closeOnClickModal&&this.handleClose()},handleClose:function(){"function"==typeof this.beforeClose?this.beforeClose(this.hide):this.hide()},hide:function(e){!1!==e&&(this.$emit("update:visible",!1),this.$emit("close"),this.closed=!0)},updatePopper:function(){this.broadcast("ElSelectDropdown","updatePopper"),this.broadcast("ElDropdownMenu","updatePopper")},afterEnter:function(){this.$emit("opened")},afterLeave:function(){this.$emit("closed")}},mounted:function(){this.visible&&(this.rendered=!0,this.open(),this.appendToBody&&document.body.appendChild(this.$el))},destroyed:function(){this.appendToBody&&this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)}},xe=Object(r.a)(Ce,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"dialog-fade"},on:{"after-enter":e.afterEnter,"after-leave":e.afterLeave}},[n("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:e.handleWrapperClick(t)}}},[n("div",{ref:"dialog",staticClass:"el-dialog",class:[{"is-fullscreen":e.fullscreen,"el-dialog--center":e.center},e.customClass],style:e.style,attrs:{role:"dialog","aria-modal":"true","aria-label":e.title||"dialog"}},[n("div",{staticClass:"el-dialog__header"},[e._t("title",[n("span",{staticClass:"el-dialog__title"},[e._v(e._s(e.title))])]),e.showClose?n("button",{staticClass:"el-dialog__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:e.handleClose}},[n("i",{staticClass:"el-dialog__close el-icon el-icon-close"})]):e._e()],2),e.rendered?n("div",{staticClass:"el-dialog__body"},[e._t("default")],2):e._e(),e.$slots.footer?n("div",{staticClass:"el-dialog__footer"},[e._t("footer")],2):e._e()])])])},[],!1,null,null,null);xe.options.__file="component.vue";var Ne=xe.exports;Ne.install=function(e){e.component(Ne.name,Ne)};var De=Ne,_e={components:{ElScrollbar:oe},mixins:[$,a],componentName:"ElAutocompleteSuggestions",data:function(){return{parent:this.$parent,dropdownWidth:""}},props:{options:{default:function(){return{gpuAcceleration:!1}}},id:String},methods:{select:function(e){this.dispatch("ElAutocomplete","item-click",e)}},updated:function(){var e=this;this.$nextTick(function(t){e.popperJS&&e.updatePopper()})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$refs.input.$refs.input,this.referenceList=this.$el.querySelector(".el-autocomplete-suggestion__list"),this.referenceList.setAttribute("role","listbox"),this.referenceList.setAttribute("id",this.id)},created:function(){var e=this;this.$on("visible",function(t,n){e.dropdownWidth=n+"px",e.showPopper=t})}},Ie=Object(r.a)(_e,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-autocomplete-suggestion el-popper",class:{"is-loading":!e.parent.hideLoading&&e.parent.loading},style:{width:e.dropdownWidth},attrs:{role:"region"}},[n("el-scrollbar",{attrs:{tag:"ul","wrap-class":"el-autocomplete-suggestion__wrap","view-class":"el-autocomplete-suggestion__list"}},[!e.parent.hideLoading&&e.parent.loading?n("li",[n("i",{staticClass:"el-icon-loading"})]):e._t("default")],2)],1)])},[],!1,null,null,null);Ie.options.__file="autocomplete-suggestions.vue";var ke=Ie.exports,je={name:"ElAutocomplete",mixins:[a,l("input"),h],inheritAttrs:!1,componentName:"ElAutocomplete",components:{ElInput:M,ElAutocompleteSuggestions:ke},directives:{Clickoutside:pe},props:{valueKey:{type:String,default:"value"},popperClass:String,popperOptions:Object,placeholder:String,clearable:{type:Boolean,default:!1},disabled:Boolean,name:String,size:String,value:String,maxlength:Number,minlength:Number,autofocus:Boolean,fetchSuggestions:Function,triggerOnFocus:{type:Boolean,default:!0},customItem:String,selectWhenUnmatched:{type:Boolean,default:!1},prefixIcon:String,suffixIcon:String,label:String,debounce:{type:Number,default:300},placement:{type:String,default:"bottom-start"},hideLoading:Boolean,popperAppendToBody:{type:Boolean,default:!0}},data:function(){return{activated:!1,suggestions:[],loading:!1,highlightedIndex:-1,suggestionDisabled:!1}},computed:{suggestionVisible:function(){var e=this.suggestions;return(Array.isArray(e)&&e.length>0||this.loading)&&this.activated},id:function(){return"el-autocomplete-"+Object(Y.e)()}},watch:{suggestionVisible:function(e){var t=this.getInput();t&&this.broadcast("ElAutocompleteSuggestions","visible",[e,t.offsetWidth])}},methods:{getMigratingConfig:function(){return{props:{"custom-item":"custom-item is removed, use scoped slot instead.",props:"props is removed, use value-key instead."}}},getData:function(e){var t=this;this.suggestionDisabled||(this.loading=!0,this.fetchSuggestions(e,function(e){t.loading=!1,t.suggestionDisabled||(Array.isArray(e)?t.suggestions=e:console.error("[Element Error][Autocomplete]autocomplete suggestions must be an array"))}))},handleChange:function(e){if(this.$emit("input",e),this.suggestionDisabled=!1,!this.triggerOnFocus&&!e)return this.suggestionDisabled=!0,void(this.suggestions=[]);this.debouncedGetData(e)},handleFocus:function(e){this.activated=!0,this.$emit("focus",e),this.triggerOnFocus&&this.debouncedGetData(this.value)},handleBlur:function(e){this.$emit("blur",e)},handleClear:function(){this.activated=!1,this.$emit("clear")},close:function(e){this.activated=!1},handleKeyEnter:function(e){var t=this;this.suggestionVisible&&this.highlightedIndex>=0&&this.highlightedIndex=this.suggestions.length&&(e=this.suggestions.length-1);var t=this.$refs.suggestions.$el.querySelector(".el-autocomplete-suggestion__wrap"),n=t.querySelectorAll(".el-autocomplete-suggestion__list li")[e],i=t.scrollTop,r=n.offsetTop;r+n.scrollHeight>i+t.clientHeight&&(t.scrollTop+=n.scrollHeight),r-1?(this.removeTabindex(),this.resetTabindex(this.menuItems[0]),this.menuItems[0].focus(),e.preventDefault(),e.stopPropagation()):13===t?this.handleClick():[9,27].indexOf(t)>-1&&this.hide()},handleItemKeyDown:function(e){var t=e.keyCode,n=e.target,i=this.menuItemsArray.indexOf(n),r=this.menuItemsArray.length-1,o=void 0;[38,40].indexOf(t)>-1?(o=38===t?0!==i?i-1:0:i-1&&(this.hide(),this.triggerElm.focus())},resetTabindex:function(e){this.removeTabindex(),e.setAttribute("tabindex","0")},removeTabindex:function(){this.triggerElm.setAttribute("tabindex","-1"),this.menuItemsArray.forEach(function(e){e.setAttribute("tabindex","-1")})},initAria:function(){this.dropdownElm.setAttribute("id",this.listId),this.triggerElm.setAttribute("aria-haspopup","list"),this.triggerElm.setAttribute("aria-controls",this.listId),this.menuItems=this.dropdownElm.querySelectorAll("[tabindex='-1']"),this.menuItemsArray=Array.prototype.slice.call(this.menuItems),this.splitButton||(this.triggerElm.setAttribute("role","button"),this.triggerElm.setAttribute("tabindex","0"),this.triggerElm.setAttribute("class",(this.triggerElm.getAttribute("class")||"")+" el-dropdown-selfdefine"))},initEvent:function(){var e=this,t=this.trigger,n=this.show,i=this.hide,r=this.handleClick,o=this.splitButton,s=this.handleTriggerKeyDown,a=this.handleItemKeyDown;this.triggerElm=o?this.$refs.trigger.$el:this.$slots.default[0].elm;var l=this.dropdownElm=this.$slots.dropdown[0].elm;this.triggerElm.addEventListener("keydown",s),l.addEventListener("keydown",a,!0),o||(this.triggerElm.addEventListener("focus",function(){e.focusing=!0}),this.triggerElm.addEventListener("blur",function(){e.focusing=!1}),this.triggerElm.addEventListener("click",function(){e.focusing=!1})),"hover"===t?(this.triggerElm.addEventListener("mouseenter",n),this.triggerElm.addEventListener("mouseleave",i),l.addEventListener("mouseenter",n),l.addEventListener("mouseleave",i)):"click"===t&&this.triggerElm.addEventListener("click",r)},handleMenuItemClick:function(e,t){this.hideOnClick&&(this.visible=!1),this.$emit("command",e,t)},focus:function(){this.triggerElm.focus&&this.triggerElm.focus()}},render:function(e){var t=this,n=this.hide,i=this.splitButton,r=this.type,o=this.dropdownSize,s=i?e("el-button-group",[e("el-button",{attrs:{type:r,size:o},nativeOn:{click:function(e){t.$emit("click",e),n()}}},[this.$slots.default]),e("el-button",{ref:"trigger",attrs:{type:r,size:o},class:"el-dropdown__caret-button"},[e("i",{class:"el-dropdown__icon el-icon-arrow-down"})])]):this.$slots.default;return e("div",{class:"el-dropdown",directives:[{name:"clickoutside",value:n}]},[s,this.$slots.dropdown])}},Re=Object(r.a)(Ye,void 0,void 0,!1,null,null,null);Re.options.__file="dropdown.vue";var Be=Re.exports;Be.install=function(e){e.component(Be.name,Be)};var Qe=Be,Ve={name:"ElDropdownMenu",componentName:"ElDropdownMenu",mixins:[$],props:{visibleArrow:{type:Boolean,default:!0},arrowOffset:{type:Number,default:0}},data:function(){return{size:this.dropdown.dropdownSize}},inject:["dropdown"],created:function(){var e=this;this.$on("updatePopper",function(){e.showPopper&&e.updatePopper()}),this.$on("visible",function(t){e.showPopper=t})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{"dropdown.placement":{immediate:!0,handler:function(e){this.currentPlacement=e}}}},He=Object(r.a)(Ve,function(){var e=this.$createElement,t=this._self._c||e;return t("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":this.doDestroy}},[t("ul",{directives:[{name:"show",rawName:"v-show",value:this.showPopper,expression:"showPopper"}],staticClass:"el-dropdown-menu el-popper",class:[this.size&&"el-dropdown-menu--"+this.size]},[this._t("default")],2)])},[],!1,null,null,null);He.options.__file="dropdown-menu.vue";var We=He.exports;We.install=function(e){e.component(We.name,We)};var Ge=We,qe={name:"ElDropdownItem",mixins:[a],props:{command:{},disabled:Boolean,divided:Boolean},methods:{handleClick:function(e){this.dispatch("ElDropdown","menu-item-click",[this.command,this])}}},Ze=Object(r.a)(qe,function(){var e=this.$createElement;return(this._self._c||e)("li",{staticClass:"el-dropdown-menu__item",class:{"is-disabled":this.disabled,"el-dropdown-menu__item--divided":this.divided},attrs:{"aria-disabled":this.disabled,tabindex:this.disabled?null:-1},on:{click:this.handleClick}},[this._t("default")],2)},[],!1,null,null,null);Ze.options.__file="dropdown-item.vue";var Ke=Ze.exports;Ke.install=function(e){e.component(Ke.name,Ke)};var Je=Ke,Xe=Xe||{};Xe.Utils=Xe.Utils||{},Xe.Utils.focusFirstDescendant=function(e){for(var t=0;t=0;t--){var n=e.childNodes[t];if(Xe.Utils.attemptFocus(n)||Xe.Utils.focusLastDescendant(n))return!0}return!1},Xe.Utils.attemptFocus=function(e){if(!Xe.Utils.isFocusable(e))return!1;Xe.Utils.IgnoreUtilFocusChanges=!0;try{e.focus()}catch(e){}return Xe.Utils.IgnoreUtilFocusChanges=!1,document.activeElement===e},Xe.Utils.isFocusable=function(e){if(e.tabIndex>0||0===e.tabIndex&&null!==e.getAttribute("tabIndex"))return!0;if(e.disabled)return!1;switch(e.nodeName){case"A":return!!e.href&&"ignore"!==e.rel;case"INPUT":return"hidden"!==e.type&&"file"!==e.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}},Xe.Utils.triggerEvent=function(e,t){var n=void 0;n=/^mouse|click/.test(t)?"MouseEvents":/^key/.test(t)?"KeyboardEvent":"HTMLEvents";for(var i=document.createEvent(n),r=arguments.length,o=Array(r>2?r-2:0),s=2;s=0;t--)e.splice(t,0,e[t]);e=e.join("")}return/^[0-9a-fA-F]{6}$/.test(e)?{red:parseInt(e.slice(0,2),16),green:parseInt(e.slice(2,4),16),blue:parseInt(e.slice(4,6),16)}:{red:255,green:255,blue:255}},mixColor:function(e,t){var n=this.getColorChannels(e),i=n.red,r=n.green,o=n.blue;return t>0?(i*=1-t,r*=1-t,o*=1-t):(i+=(255-i)*t,r+=(255-r)*t,o+=(255-o)*t),"rgb("+Math.round(i)+", "+Math.round(r)+", "+Math.round(o)+")"},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 n=this.openedMenus;-1===n.indexOf(e)&&(this.uniqueOpened&&(this.openedMenus=n.filter(function(e){return-1!==t.indexOf(e)})),this.openedMenus.push(e))},closeMenu:function(e){var t=this.openedMenus.indexOf(e);-1!==t&&this.openedMenus.splice(t,1)},handleSubmenuClick:function(e){var t=e.index,n=e.indexPath;-1!==this.openedMenus.indexOf(t)?(this.closeMenu(t),this.$emit("close",t,n)):(this.openMenu(t,n),this.$emit("open",t,n))},handleItemClick:function(e){var t=this,n=e.index,i=e.indexPath,r=this.activeIndex;this.activeIndex=e.index,this.$emit("select",n,i,e),("horizontal"===this.mode||this.collapse)&&(this.openedMenus=[]),this.router&&this.routeToItem(e,function(e){t.activeIndex=r,e&&console.error(e)})},initOpenedMenu:function(){var e=this,t=this.activeIndex,n=this.items[t];n&&"horizontal"!==this.mode&&!this.collapse&&n.indexPath.forEach(function(t){var n=e.submenus[t];n&&e.openMenu(t,n.indexPath)})},routeToItem:function(e,t){var n=e.route||e.index;try{this.$router.push(n,function(){},t)}catch(e){console.error(e)}},open:function(e){var t=this,n=this.submenus[e.toString()].indexPath;n.forEach(function(e){return t.openMenu(e,n)})},close:function(e){this.closeMenu(e)}},mounted:function(){this.initOpenedMenu(),this.$on("item-click",this.handleItemClick),this.$on("submenu-click",this.handleSubmenuClick),"horizontal"===this.mode&&new st(this.$el),this.$watch("items",this.updateActiveIndex)}},lt=Object(r.a)(at,void 0,void 0,!1,null,null,null);lt.options.__file="menu.vue";var ut=lt.exports;ut.install=function(e){e.component(ut.name,ut)};var ct=ut;var ht=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}return e.prototype.beforeEnter=function(e){Object(C.a)(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){Object(C.g)(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&&(Object(C.a)(e,"collapse-transition"),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},e.prototype.afterLeave=function(e){Object(C.g)(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}(),dt={name:"ElCollapseTransition",functional:!0,render:function(e,t){var n=t.children;return e("transition",{on:new ht},n)}},pt={inject:["rootMenu"],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},parentMenu:function(){for(var e=this.$parent;e&&-1===["ElMenu","ElSubmenu"].indexOf(e.$options.componentName);)e=e.$parent;return e},paddingStyle:function(){if("vertical"!==this.rootMenu.mode)return{};var e=20,t=this.$parent;if(this.rootMenu.collapse)e=20;else for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return{paddingLeft:e+"px"}}}},ft={name:"ElSubmenu",componentName:"ElSubmenu",mixins:[pt,a,{props:{transformOrigin:{type:[Boolean,String],default:!1},offset:$.props.offset,boundariesPadding:$.props.boundariesPadding,popperOptions:$.props.popperOptions},data:$.data,methods:$.methods,beforeDestroy:$.beforeDestroy,deactivated:$.deactivated}],components:{ElCollapseTransition:dt},props:{index:{type:String,required:!0},showTimeout:{type:Number,default:300},hideTimeout:{type:Number,default:300},popperClass:String,disabled:Boolean,popperAppendToBody:{type:Boolean,default:void 0}},data:function(){return{popperJS:null,timeout:null,items:{},submenus:{},mouseInChild:!1}},watch:{opened:function(e){var t=this;this.isMenuPopup&&this.$nextTick(function(e){t.updatePopper()})}},computed:{appendToBody:function(){return void 0===this.popperAppendToBody?this.isFirstLevel:this.popperAppendToBody},menuTransitionName:function(){return this.rootMenu.collapse?"el-zoom-in-left":"el-zoom-in-top"},opened:function(){return this.rootMenu.openedMenus.indexOf(this.index)>-1},active:function(){var e=!1,t=this.submenus,n=this.items;return Object.keys(n).forEach(function(t){n[t].active&&(e=!0)}),Object.keys(t).forEach(function(n){t[n].active&&(e=!0)}),e},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},isMenuPopup:function(){return this.rootMenu.isMenuPopup},titleStyle:function(){return"horizontal"!==this.mode?{color:this.textColor}:{borderBottomColor:this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent",color:this.active?this.activeTextColor:this.textColor}},isFirstLevel:function(){for(var e=!0,t=this.$parent;t&&t!==this.rootMenu;){if(["ElSubmenu","ElMenuItemGroup"].indexOf(t.$options.componentName)>-1){e=!1;break}t=t.$parent}return e}},methods:{handleCollapseToggle:function(e){e?this.initPopper():this.doDestroy()},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(){var e=this.rootMenu,t=this.disabled;"hover"===e.menuTrigger&&"horizontal"===e.mode||e.collapse&&"vertical"===e.mode||t||this.dispatch("ElMenu","submenu-click",this)},handleMouseenter:function(){var e=this,t=this.rootMenu,n=this.disabled;"click"===t.menuTrigger&&"horizontal"===t.mode||!t.collapse&&"vertical"===t.mode||n||(this.dispatch("ElSubmenu","mouse-enter-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.rootMenu.openMenu(e.index,e.indexPath)},this.showTimeout))},handleMouseleave:function(){var e=this,t=this.rootMenu;"click"===t.menuTrigger&&"horizontal"===t.mode||!t.collapse&&"vertical"===t.mode||(this.dispatch("ElSubmenu","mouse-leave-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){!e.mouseInChild&&e.rootMenu.closeMenu(e.index)},this.hideTimeout))},handleTitleMouseenter:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.hoverBackground)}},handleTitleMouseleave:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.backgroundColor||"")}},updatePlacement:function(){this.currentPlacement="horizontal"===this.mode&&this.isFirstLevel?"bottom-start":"right-start"},initPopper:function(){this.referenceElm=this.$el,this.popperElm=this.$refs.menu,this.updatePlacement()}},created:function(){var e=this;this.$on("toggle-collapse",this.handleCollapseToggle),this.$on("mouse-enter-child",function(){e.mouseInChild=!0,clearTimeout(e.timeout)}),this.$on("mouse-leave-child",function(){e.mouseInChild=!1,clearTimeout(e.timeout)})},mounted:function(){this.parentMenu.addSubmenu(this),this.rootMenu.addSubmenu(this),this.initPopper()},beforeDestroy:function(){this.parentMenu.removeSubmenu(this),this.rootMenu.removeSubmenu(this)},render:function(e){var t=this.active,n=this.opened,i=this.paddingStyle,r=this.titleStyle,o=this.backgroundColor,s=this.rootMenu,a=this.currentPlacement,l=this.menuTransitionName,u=this.mode,c=this.disabled,h=this.popperClass,d=this.$slots,p=this.isFirstLevel,f=e("transition",{attrs:{name:l}},[e("div",{ref:"menu",directives:[{name:"show",value:n}],class:["el-menu--"+u,h],on:{mouseenter:this.handleMouseenter,mouseleave:this.handleMouseleave,focus:this.handleMouseenter}},[e("ul",{attrs:{role:"menu"},class:["el-menu el-menu--popup","el-menu--popup-"+a],style:{backgroundColor:s.backgroundColor||""}},[d.default])])]),m=e("el-collapse-transition",[e("ul",{attrs:{role:"menu"},class:"el-menu el-menu--inline",directives:[{name:"show",value:n}],style:{backgroundColor:s.backgroundColor||""}},[d.default])]),g="horizontal"===s.mode&&p||"vertical"===s.mode&&!s.collapse?"el-icon-arrow-down":"el-icon-arrow-right";return e("li",{class:{"el-submenu":!0,"is-active":t,"is-opened":n,"is-disabled":c},attrs:{role:"menuitem","aria-haspopup":"true","aria-expanded":n},on:{mouseenter:this.handleMouseenter,mouseleave:this.handleMouseleave,focus:this.handleMouseenter}},[e("div",{class:"el-submenu__title",ref:"submenu-title",on:{click:this.handleClick,mouseenter:this.handleTitleMouseenter,mouseleave:this.handleTitleMouseleave},style:[i,r,{backgroundColor:o}]},[d.title,e("i",{class:["el-submenu__icon-arrow",g]})]),this.isMenuPopup?f:m])}},mt=Object(r.a)(ft,void 0,void 0,!1,null,null,null);mt.options.__file="submenu.vue";var gt=mt.exports;gt.install=function(e){e.component(gt.name,gt)};var vt=gt,yt="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 bt(e){return null!==e&&"object"===(void 0===e?"undefined":yt(e))&&Object(Y.h)(e,"componentOptions")}var Mt={name:"ElTooltip",mixins:[$],props:{openDelay:{type:Number,default:0},disabled:Boolean,manual:Boolean,effect:{type:String,default:"dark"},arrowOffset:{type:Number,default:0},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},hideAfter:{type:Number,default:0}},data:function(){return{timeoutPending:null,focusing:!1}},computed:{tooltipId:function(){return"el-tooltip-"+Object(Y.e)()}},beforeCreate:function(){var e=this;this.$isServer||(this.popperVM=new w.a({data:{node:""},render:function(e){return this.node}}).$mount(),this.debounceClose=ae()(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",attrs:{role:"tooltip",id:this.tooltipId,"aria-hidden":this.disabled||!this.showPopper?"true":"false"},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 n,i=(n=this.$slots.default)&&n.filter(function(e){return e&&e.tag})[0];if(!i)return i;var r=i.data=i.data||{};return r.staticClass=this.concatClass(r.staticClass,"el-tooltip"),i},mounted:function(){var e=this;this.referenceElm=this.$el,1===this.$el.nodeType&&(this.$el.setAttribute("aria-describedby",this.tooltipId),this.$el.setAttribute("tabindex",0),Object(C.e)(this.referenceElm,"mouseenter",this.show),Object(C.e)(this.referenceElm,"mouseleave",this.hide),Object(C.e)(this.referenceElm,"focus",function(){if(e.$slots.default&&e.$slots.default.length){var t=e.$slots.default[0].componentInstance;t&&t.focus?t.focus():e.handleFocus()}else e.handleFocus()}),Object(C.e)(this.referenceElm,"blur",this.handleBlur),Object(C.e)(this.referenceElm,"click",this.removeFocusing))},watch:{focusing:function(e){e?Object(C.a)(this.referenceElm,"focusing"):Object(C.g)(this.referenceElm,"focusing")}},methods:{show:function(){this.setExpectedState(!0),this.handleShowPopper()},hide:function(){this.setExpectedState(!1),this.debounceClose()},handleFocus:function(){this.focusing=!0,this.show()},handleBlur:function(){this.focusing=!1,this.hide()},removeFocusing:function(){this.focusing=!1},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),this.hideAfter>0&&(this.timeoutPending=setTimeout(function(){e.showPopper=!1},this.hideAfter)))},handleClosePopper:function(){this.enterable&&this.expectedState||this.manual||(clearTimeout(this.timeout),this.timeoutPending&&clearTimeout(this.timeoutPending),this.showPopper=!1,this.disabled&&this.doDestroy())},setExpectedState:function(e){!1===e&&clearTimeout(this.timeoutPending),this.expectedState=e}},beforeDestroy:function(){this.popperVM&&this.popperVM.$destroy()},destroyed:function(){var e=this.referenceElm;Object(C.d)(e,"mouseenter",this.show),Object(C.d)(e,"mouseleave",this.hide),Object(C.d)(e,"focus",this.handleFocus),Object(C.d)(e,"blur",this.handleBlur),Object(C.d)(e,"click",this.removeFocusing)},install:function(e){e.component(Mt.name,Mt)}},wt=Mt,Ct={name:"ElMenuItem",componentName:"ElMenuItem",mixins:[pt,a],components:{ElTooltip:wt},props:{index:{type:String,required:!0},route:[String,Object],disabled:Boolean},computed:{active:function(){return this.index===this.rootMenu.activeIndex},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},itemStyle:function(){var e={color:this.active?this.activeTextColor:this.textColor};return"horizontal"!==this.mode||this.isNested||(e.borderBottomColor=this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent"),e},isNested:function(){return this.parentMenu!==this.rootMenu}},methods:{onMouseEnter:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.hoverBackground)},onMouseLeave:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.backgroundColor)},handleClick:function(){this.disabled||(this.dispatch("ElMenu","item-click",this),this.$emit("click",this))}},mounted:function(){this.parentMenu.addItem(this),this.rootMenu.addItem(this)},beforeDestroy:function(){this.parentMenu.removeItem(this),this.rootMenu.removeItem(this)}},xt=Object(r.a)(Ct,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("li",{staticClass:"el-menu-item",class:{"is-active":e.active,"is-disabled":e.disabled},style:[e.paddingStyle,e.itemStyle,{backgroundColor:e.backgroundColor}],attrs:{role:"menuitem",tabindex:"-1"},on:{click:e.handleClick,mouseenter:e.onMouseEnter,focus:e.onMouseEnter,blur:e.onMouseLeave,mouseleave:e.onMouseLeave}},["ElMenu"===e.parentMenu.$options.componentName&&e.rootMenu.collapse&&e.$slots.title?n("el-tooltip",{attrs:{effect:"dark",placement:"right"}},[n("div",{attrs:{slot:"content"},slot:"content"},[e._t("title")],2),n("div",{staticStyle:{position:"absolute",left:"0",top:"0",height:"100%",width:"100%",display:"inline-block","box-sizing":"border-box",padding:"0 20px"}},[e._t("default")],2)]):[e._t("default"),e._t("title")]],2)},[],!1,null,null,null);xt.options.__file="menu-item.vue";var Nt=xt.exports;Nt.install=function(e){e.component(Nt.name,Nt)};var Dt=Nt,_t={name:"ElMenuItemGroup",componentName:"ElMenuItemGroup",inject:["rootMenu"],props:{title:{type:String}},data:function(){return{paddingLeft:20}},computed:{levelPadding:function(){var e=20,t=this.$parent;if(this.rootMenu.collapse)return 20;for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return e}}},It=Object(r.a)(_t,function(){var e=this.$createElement,t=this._self._c||e;return t("li",{staticClass:"el-menu-item-group"},[t("div",{staticClass:"el-menu-item-group__title",style:{paddingLeft:this.levelPadding+"px"}},[this.$slots.title?this._t("title"):[this._v(this._s(this.title))]],2),t("ul",[this._t("default")],2)])},[],!1,null,null,null);It.options.__file="menu-item-group.vue";var kt=It.exports;kt.install=function(e){e.component(kt.name,kt)};var jt=kt,Tt={bind:function(e,t,n){var i=null,r=void 0,o=function(){return n.context[t.expression].apply()},s=function(){new Date-r<100&&o(),clearInterval(i),i=null};Object(C.e)(e,"mousedown",function(e){0===e.button&&(r=new Date,Object(C.f)(document,"mouseup",s),clearInterval(i),i=setInterval(o,100))})}},St={name:"ElInputNumber",mixins:[l("input")],inject:{elForm:{default:""},elFormItem:{default:""}},directives:{repeatClick:Tt},components:{ElInput:M},props:{step:{type:Number,default:1},max:{type:Number,default:1/0},min:{type:Number,default:-1/0},value:{},disabled:Boolean,size:String,controls:{type:Boolean,default:!0},controlsPosition:{type:String,default:""},name:String,label:String,placeholder:String,precision:{type:Number,validator:function(e){return e>=0&&e===parseInt(e,10)}}},data:function(){return{currentValue:0,userInput:null}},watch:{value:{immediate:!0,handler:function(e){var t=void 0===e?e:Number(e);if(void 0!==t){if(isNaN(t))return;void 0!==this.precision&&(t=this.toPrecision(t,this.precision))}t>=this.max&&(t=this.max),t<=this.min&&(t=this.min),this.currentValue=t,this.userInput=null,this.$emit("input",t)}}},computed:{minDisabled:function(){return this._decrease(this.value,this.step)this.max},numPrecision:function(){var e=this.value,t=this.step,n=this.getPrecision,i=this.precision,r=n(t);return void 0!==i?(r>i&&console.warn("[Element Warn][InputNumber]precision should not be less than the decimal places of step"),i):Math.max(n(e),r)},controlsAtRight:function(){return this.controls&&"right"===this.controlsPosition},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},inputNumberSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},inputNumberDisabled:function(){return this.disabled||(this.elForm||{}).disabled},displayValue:function(){if(null!==this.userInput)return this.userInput;var e=this.currentValue;return"number"==typeof e&&void 0!==this.precision?e.toFixed(this.precision):e}},methods:{toPrecision:function(e,t){return void 0===t&&(t=this.numPrecision),parseFloat(parseFloat(Number(e).toFixed(t)))},getPrecision:function(e){if(void 0===e)return 0;var t=e.toString(),n=t.indexOf("."),i=0;return-1!==n&&(i=t.length-n-1),i},_increase:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var n=Math.pow(10,this.numPrecision);return this.toPrecision((n*e+n*t)/n)},_decrease:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var n=Math.pow(10,this.numPrecision);return this.toPrecision((n*e-n*t)/n)},increase:function(){if(!this.inputNumberDisabled&&!this.maxDisabled){var e=this.value||0,t=this._increase(e,this.step);this.setCurrentValue(t)}},decrease:function(){if(!this.inputNumberDisabled&&!this.minDisabled){var e=this.value||0,t=this._decrease(e,this.step);this.setCurrentValue(t)}},handleBlur:function(e){this.$emit("blur",e)},handleFocus:function(e){this.$emit("focus",e)},setCurrentValue:function(e){var t=this.currentValue;"number"==typeof e&&void 0!==this.precision&&(e=this.toPrecision(e,this.precision)),e>=this.max&&(e=this.max),e<=this.min&&(e=this.min),t!==e&&(this.userInput=null,this.$emit("input",e),this.$emit("change",e,t),this.currentValue=e)},handleInput:function(e){this.userInput=e},handleInputChange:function(e){var t=""===e?void 0:Number(e);isNaN(t)&&""!==e||this.setCurrentValue(t),this.userInput=null},select:function(){this.$refs.input.select()}},mounted:function(){var e=this.$refs.input.$refs.input;e.setAttribute("role","spinbutton"),e.setAttribute("aria-valuemax",this.max),e.setAttribute("aria-valuemin",this.min),e.setAttribute("aria-valuenow",this.currentValue),e.setAttribute("aria-disabled",this.inputNumberDisabled)},updated:function(){this.$refs&&this.$refs.input&&this.$refs.input.$refs.input.setAttribute("aria-valuenow",this.currentValue)}},Lt=Object(r.a)(St,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{class:["el-input-number",e.inputNumberSize?"el-input-number--"+e.inputNumberSize:"",{"is-disabled":e.inputNumberDisabled},{"is-without-controls":!e.controls},{"is-controls-right":e.controlsAtRight}],on:{dragstart:function(e){e.preventDefault()}}},[e.controls?n("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-input-number__decrease",class:{"is-disabled":e.minDisabled},attrs:{role:"button"},on:{keydown:function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?e.decrease(t):null}}},[n("i",{class:"el-icon-"+(e.controlsAtRight?"arrow-down":"minus")})]):e._e(),e.controls?n("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-input-number__increase",class:{"is-disabled":e.maxDisabled},attrs:{role:"button"},on:{keydown:function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?e.increase(t):null}}},[n("i",{class:"el-icon-"+(e.controlsAtRight?"arrow-up":"plus")})]):e._e(),n("el-input",{ref:"input",attrs:{value:e.displayValue,placeholder:e.placeholder,disabled:e.inputNumberDisabled,size:e.inputNumberSize,max:e.max,min:e.min,name:e.name,label:e.label},on:{blur:e.handleBlur,focus:e.handleFocus,input:e.handleInput,change:e.handleInputChange},nativeOn:{keydown:[function(t){return"button"in t||!e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?(t.preventDefault(),e.increase(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?(t.preventDefault(),e.decrease(t)):null}]}})],1)},[],!1,null,null,null);Lt.options.__file="input-number.vue";var Ot=Lt.exports;Ot.install=function(e){e.component(Ot.name,Ot)};var At=Ot,Et={name:"ElRadio",mixins:[a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElRadio",props:{value:{},label:{},disabled:Boolean,name:String,border:Boolean,size: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)}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._radioGroup.radioGroupSize||e},isDisabled:function(){return this.isGroup?this._radioGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this.isGroup&&this.model!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.model),e.isGroup&&e.dispatch("ElRadioGroup","handleChange",e.model)})}}},zt=Object(r.a)(Et,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("label",{staticClass:"el-radio",class:[e.border&&e.radioSize?"el-radio--"+e.radioSize:"",{"is-disabled":e.isDisabled},{"is-focus":e.focus},{"is-bordered":e.border},{"is-checked":e.model===e.label}],attrs:{role:"radio","aria-checked":e.model===e.label,"aria-disabled":e.isDisabled,tabindex:e.tabIndex},on:{keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"space",32,t.key,[" ","Spacebar"]))return null;t.stopPropagation(),t.preventDefault(),e.model=e.isDisabled?e.model:e.label}}},[n("span",{staticClass:"el-radio__input",class:{"is-disabled":e.isDisabled,"is-checked":e.model===e.label}},[n("span",{staticClass:"el-radio__inner"}),n("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-radio__original",attrs:{type:"radio","aria-hidden":"true",name:e.name,disabled:e.isDisabled,tabindex:"-1"},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},e.handleChange]}})]),n("span",{staticClass:"el-radio__label",on:{keydown:function(e){e.stopPropagation()}}},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2)])},[],!1,null,null,null);zt.options.__file="radio.vue";var $t=zt.exports;$t.install=function(e){e.component($t.name,$t)};var Pt=$t,Ft=Object.freeze({LEFT:37,UP:38,RIGHT:39,DOWN:40}),Ut={name:"ElRadioGroup",componentName:"ElRadioGroup",inject:{elFormItem:{default:""}},mixins:[a],props:{value:{},size:String,fill:String,textColor:String,disabled:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},created:function(){var e=this;this.$on("handleChange",function(t){e.$emit("change",t)})},mounted:function(){var e=this.$el.querySelectorAll("[type=radio]"),t=this.$el.querySelectorAll("[role=radio]")[0];![].some.call(e,function(e){return e.checked})&&t&&(t.tabIndex=0)},methods:{handleKeydown:function(e){var t=e.target,n="INPUT"===t.nodeName?"[type=radio]":"[role=radio]",i=this.$el.querySelectorAll(n),r=i.length,o=[].indexOf.call(i,t),s=this.$el.querySelectorAll("[role=radio]");switch(e.keyCode){case Ft.LEFT:case Ft.UP:e.stopPropagation(),e.preventDefault(),0===o?(s[r-1].click(),s[r-1].focus()):(s[o-1].click(),s[o-1].focus());break;case Ft.RIGHT:case Ft.DOWN:o===r-1?(e.stopPropagation(),e.preventDefault(),s[0].click(),s[0].focus()):(s[o+1].click(),s[o+1].focus())}}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[this.value])}}},Yt=Object(r.a)(Ut,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-radio-group",attrs:{role:"radiogroup"},on:{keydown:this.handleKeydown}},[this._t("default")],2)},[],!1,null,null,null);Yt.options.__file="radio-group.vue";var Rt=Yt.exports;Rt.install=function(e){e.component(Rt.name,Rt)};var Bt=Rt,Qt={name:"ElRadioButton",mixins:[a],inject:{elForm:{default:""},elFormItem:{default:""}},props:{label:{},disabled:Boolean,name:String},data:function(){return{focus:!1}},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||""}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._radioGroup.radioGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this.disabled||this._radioGroup.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this._radioGroup&&this.value!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.dispatch("ElRadioGroup","handleChange",e.value)})}}},Vt=Object(r.a)(Qt,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("label",{staticClass:"el-radio-button",class:[e.size?"el-radio-button--"+e.size:"",{"is-active":e.value===e.label},{"is-disabled":e.isDisabled},{"is-focus":e.focus}],attrs:{role:"radio","aria-checked":e.value===e.label,"aria-disabled":e.isDisabled,tabindex:e.tabIndex},on:{keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"space",32,t.key,[" ","Spacebar"]))return null;t.stopPropagation(),t.preventDefault(),e.value=e.isDisabled?e.value:e.label}}},[n("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,tabindex:"-1"},domProps:{value:e.label,checked:e._q(e.value,e.label)},on:{change:[function(t){e.value=e.label},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}),n("span",{staticClass:"el-radio-button__inner",style:e.value===e.label?e.activeStyle:null,on:{keydown:function(e){e.stopPropagation()}}},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2)])},[],!1,null,null,null);Vt.options.__file="radio-button.vue";var Ht=Vt.exports;Ht.install=function(e){e.component(Ht.name,Ht)};var Wt=Ht,Gt={name:"ElCheckbox",mixins:[a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElCheckbox",data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},computed:{model:{get:function(){return this.isGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this.isGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.lengththis._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):(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},isDisabled:function(){return this.isGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._checkboxGroup.checkboxGroupSize||e}},props:{value:{},label:{},indeterminate:Boolean,disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number],id:String,controls:String,border:Boolean,size:String},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var n=void 0;n=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",n,e),this.$nextTick(function(){t.isGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()},mounted:function(){this.indeterminate&&this.$el.setAttribute("aria-controls",this.controls)},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}}},qt=Object(r.a)(Gt,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("label",{staticClass:"el-checkbox",class:[e.border&&e.checkboxSize?"el-checkbox--"+e.checkboxSize:"",{"is-disabled":e.isDisabled},{"is-bordered":e.border},{"is-checked":e.isChecked}],attrs:{role:"checkbox","aria-checked":e.indeterminate?"mixed":e.isChecked,"aria-disabled":e.isDisabled,id:e.id}},[n("span",{staticClass:"el-checkbox__input",class:{"is-disabled":e.isDisabled,"is-checked":e.isChecked,"is-indeterminate":e.indeterminate,"is-focus":e.focus},attrs:{"aria-checked":"mixed"}},[n("span",{staticClass:"el-checkbox__inner"}),e.trueLabel||e.falseLabel?n("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",name:e.name,disabled:e.isDisabled,"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 n=e.model,i=t.target,r=i.checked?e.trueLabel:e.falseLabel;if(Array.isArray(n)){var o=e._i(n,null);i.checked?o<0&&(e.model=n.concat([null])):o>-1&&(e.model=n.slice(0,o).concat(n.slice(o+1)))}else e.model=r},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}):n("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",disabled:e.isDisabled,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 n=e.model,i=t.target,r=!!i.checked;if(Array.isArray(n)){var o=e.label,s=e._i(n,o);i.checked?s<0&&(e.model=n.concat([o])):s>-1&&(e.model=n.slice(0,s).concat(n.slice(s+1)))}else e.model=r},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}})]),e.$slots.default||e.label?n("span",{staticClass:"el-checkbox__label"},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2):e._e()])},[],!1,null,null,null);qt.options.__file="checkbox.vue";var Zt=qt.exports;Zt.install=function(e){e.component(Zt.name,Zt)};var Kt=Zt,Jt={name:"ElCheckboxButton",mixins:[a],inject:{elForm:{default:""},elFormItem:{default:""}},data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!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){this._checkboxGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.lengththis._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):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}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._checkboxGroup.checkboxGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this._checkboxGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled}},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var n=void 0;n=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",n,e),this.$nextTick(function(){t._checkboxGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()}},Xt=Object(r.a)(Jt,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("label",{staticClass:"el-checkbox-button",class:[e.size?"el-checkbox-button--"+e.size:"",{"is-disabled":e.isDisabled},{"is-checked":e.isChecked},{"is-focus":e.focus}],attrs:{role:"checkbox","aria-checked":e.isChecked,"aria-disabled":e.isDisabled}},[e.trueLabel||e.falseLabel?n("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.isDisabled,"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 n=e.model,i=t.target,r=i.checked?e.trueLabel:e.falseLabel;if(Array.isArray(n)){var o=e._i(n,null);i.checked?o<0&&(e.model=n.concat([null])):o>-1&&(e.model=n.slice(0,o).concat(n.slice(o+1)))}else e.model=r},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}):n("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.isDisabled},domProps:{value:e.label,checked:Array.isArray(e.model)?e._i(e.model,e.label)>-1:e.model},on:{change:[function(t){var n=e.model,i=t.target,r=!!i.checked;if(Array.isArray(n)){var o=e.label,s=e._i(n,o);i.checked?s<0&&(e.model=n.concat([o])):s>-1&&(e.model=n.slice(0,s).concat(n.slice(s+1)))}else e.model=r},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}),e.$slots.default||e.label?n("span",{staticClass:"el-checkbox-button__inner",style:e.isChecked?e.activeStyle:null},[e._t("default",[e._v(e._s(e.label))])],2):e._e()])},[],!1,null,null,null);Xt.options.__file="checkbox-button.vue";var en=Xt.exports;en.install=function(e){e.component(en.name,en)};var tn=en,nn={name:"ElCheckboxGroup",componentName:"ElCheckboxGroup",mixins:[a],inject:{elFormItem:{default:""}},props:{value:{},disabled:Boolean,min:Number,max:Number,size:String,fill:String,textColor:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[e])}}},rn=Object(r.a)(nn,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-checkbox-group",attrs:{role:"group","aria-label":"checkbox-group"}},[this._t("default")],2)},[],!1,null,null,null);rn.options.__file="checkbox-group.vue";var on=rn.exports;on.install=function(e){e.component(on.name,on)};var sn=on,an={name:"ElSwitch",mixins:[l("input"),h],inject:{elForm:{default:""}},props:{value:{type:[Boolean,String,Number],default:!1},disabled:{type:Boolean,default:!1},width:{type:Number,default:40},activeIconClass:{type:String,default:""},inactiveIconClass:{type:String,default:""},activeText:String,inactiveText:String,activeColor:{type:String,default:""},inactiveColor:{type:String,default:""},activeValue:{type:[Boolean,String,Number],default:!0},inactiveValue:{type:[Boolean,String,Number],default:!1},name:{type:String,default:""},id:String},data:function(){return{coreWidth:this.width}},created:function(){~[this.activeValue,this.inactiveValue].indexOf(this.value)||this.$emit("input",this.inactiveValue)},computed:{checked:function(){return this.value===this.activeValue},switchDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{checked:function(){this.$refs.input.checked=this.checked,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor()}},methods:{handleChange:function(e){var t=this;this.$emit("input",this.checked?this.inactiveValue:this.activeValue),this.$emit("change",this.checked?this.inactiveValue:this.activeValue),this.$nextTick(function(){t.$refs.input.checked=t.checked})},setBackgroundColor:function(){var e=this.checked?this.activeColor:this.inactiveColor;this.$refs.core.style.borderColor=e,this.$refs.core.style.backgroundColor=e},switchValue:function(){!this.switchDisabled&&this.handleChange()},getMigratingConfig:function(){return{props:{"on-color":"on-color is renamed to active-color.","off-color":"off-color is renamed to inactive-color.","on-text":"on-text is renamed to active-text.","off-text":"off-text is renamed to inactive-text.","on-value":"on-value is renamed to active-value.","off-value":"off-value is renamed to inactive-value.","on-icon-class":"on-icon-class is renamed to active-icon-class.","off-icon-class":"off-icon-class is renamed to inactive-icon-class."}}}},mounted:function(){this.coreWidth=this.width||40,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor(),this.$refs.input.checked=this.checked}},ln=Object(r.a)(an,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-switch",class:{"is-disabled":e.switchDisabled,"is-checked":e.checked},attrs:{role:"switch","aria-checked":e.checked,"aria-disabled":e.switchDisabled},on:{click:e.switchValue}},[n("input",{ref:"input",staticClass:"el-switch__input",attrs:{type:"checkbox",id:e.id,name:e.name,"true-value":e.activeValue,"false-value":e.inactiveValue,disabled:e.switchDisabled},on:{change:e.handleChange,keydown:function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?e.switchValue(t):null}}}),e.inactiveIconClass||e.inactiveText?n("span",{class:["el-switch__label","el-switch__label--left",e.checked?"":"is-active"]},[e.inactiveIconClass?n("i",{class:[e.inactiveIconClass]}):e._e(),!e.inactiveIconClass&&e.inactiveText?n("span",{attrs:{"aria-hidden":e.checked}},[e._v(e._s(e.inactiveText))]):e._e()]):e._e(),n("span",{ref:"core",staticClass:"el-switch__core",style:{width:e.coreWidth+"px"}}),e.activeIconClass||e.activeText?n("span",{class:["el-switch__label","el-switch__label--right",e.checked?"is-active":""]},[e.activeIconClass?n("i",{class:[e.activeIconClass]}):e._e(),!e.activeIconClass&&e.activeText?n("span",{attrs:{"aria-hidden":!e.checked}},[e._v(e._s(e.activeText))]):e._e()]):e._e()])},[],!1,null,null,null);ln.options.__file="component.vue";var un=ln.exports;un.install=function(e){e.component(un.name,un)};var cn=un,hn={mixins:[a],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!0===e.visible})}},created:function(){this.$on("queryChange",this.queryChange)},mounted:function(){this.disabled&&this.broadcast("ElOption","handleGroupDisabled",this.disabled)}},dn=Object(r.a)(hn,function(){var e=this.$createElement,t=this._self._c||e;return t("ul",{directives:[{name:"show",rawName:"v-show",value:this.visible,expression:"visible"}],staticClass:"el-select-group__wrap"},[t("li",{staticClass:"el-select-group__title"},[this._v(this._s(this.label))]),t("li",[t("ul",{staticClass:"el-select-group"},[this._t("default")],2)])])},[],!1,null,null,null);dn.options.__file="option-group.vue";var pn=dn.exports;pn.install=function(e){e.component(pn.name,pn)};var fn=pn,mn=n(62),gn=n.n(mn),vn="undefined"!=typeof navigator&&navigator.userAgent.toLowerCase().indexOf("firefox")>-1,yn={bind:function(e,t){var n,i;n=e,i=t.value,n&&n.addEventListener&&n.addEventListener(vn?"DOMMouseScroll":"mousewheel",function(e){var t=gn()(e);i&&i.apply(this,[e,t])})}},bn="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},Mn=function(e){for(var t=e.target;t&&"HTML"!==t.tagName.toUpperCase();){if("TD"===t.tagName.toUpperCase())return t;t=t.parentNode}return null},wn=function(e){return null!==e&&"object"===(void 0===e?"undefined":bn(e))},Cn=function(e,t,n,i,r){if(!t&&!i&&(!r||Array.isArray(r)&&!r.length))return e;n="string"==typeof n?"descending"===n?-1:1:n&&n<0?-1:1;var o=i?null:function(n,i){return r?(Array.isArray(r)||(r=[r]),r.map(function(t){return"string"==typeof t?Object(Y.g)(n,t):t(n,i,e)})):("$key"!==t&&wn(n)&&"$value"in n&&(n=n.$value),[wn(n)?Object(Y.g)(n,t):n])};return e.map(function(e,t){return{value:e,index:t,key:o?o(e,t):null}}).sort(function(e,t){var r=function(e,t){if(i)return i(e.value,t.value);for(var n=0,r=e.key.length;nt.key[n])return 1}return 0}(e,t);return r||(r=e.index-t.index),r*n}).map(function(e){return e.value})},xn=function(e,t){var n=null;return e.columns.forEach(function(e){e.id===t&&(n=e)}),n},Nn=function(e,t){var n=(t.className||"").match(/el-table_[^\s]+/gm);return n?xn(e,n[0]):null},Dn=function(e,t){if(!e)throw new Error("row is required when get row identity");if("string"==typeof t){if(t.indexOf(".")<0)return e[t];for(var n=t.split("."),i=e,r=0;r-1&&(r.splice(o,1),i=!0),i},jn=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e)throw new Error("Table is required.");for(var n in this.table=e,this.states={rowKey:null,_columns:[],originColumns:[],columns:[],fixedColumns:[],rightFixedColumns:[],leafColumns:[],fixedLeafColumns:[],rightFixedLeafColumns:[],leafColumnsLength:0,fixedLeafColumnsLength:0,rightFixedLeafColumnsLength:0,isComplex:!1,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,selectOnIndeterminate:!1},t)t.hasOwnProperty(n)&&this.states.hasOwnProperty(n)&&(this.states[n]=t[n])};jn.prototype.mutations={setData:function(e,t){var n=this,i=e._data!==t;e._data=t,Object.keys(e.filters).forEach(function(i){var r=e.filters[i];if(r&&0!==r.length){var o=xn(n.states,i);o&&o.filterMethod&&(t=t.filter(function(e){return r.some(function(t){return o.filterMethod.call(null,t,e,o)})}))}}),e.filteredData=t,e.data=_n(t||[],e),this.updateCurrentRow();var r=e.rowKey;if(e.reserveSelection)if(r){var o=e.selection,s=In(o,r);e.data.forEach(function(e){var t=Dn(e,r),n=s[t];n&&(o[n.index]=e)}),this.updateAllSelected()}else console.warn("WARN: rowKey is required when reserve-selection is enabled.");else i?this.clearSelection():this.cleanSelection(),this.updateAllSelected();if(e.defaultExpandAll)this.states.expandRows=(e.data||[]).slice(0);else if(r){var a=In(this.states.expandRows,r),l=[],u=e.data,c=Array.isArray(u),h=0;for(u=c?u:u[Symbol.iterator]();;){var d;if(c){if(h>=u.length)break;d=u[h++]}else{if((h=u.next()).done)break;d=h.value}var p=d;a[Dn(p,r)]&&l.push(p)}this.states.expandRows=l}else this.states.expandRows=[];w.a.nextTick(function(){return n.table.updateScrollY()})},changeSortCondition:function(e,t){var n=this;e.data=_n(e.filteredData||e._data||[],e);var i=this.table,r=i.$el,o=i.highlightCurrentRow;if(r&&o){var s=e.data,a=r.querySelector("tbody").children,l=[].filter.call(a,function(e){return Object(C.c)(e,"el-table__row")}),u=l[s.indexOf(e.currentRow)];[].forEach.call(l,function(e){return Object(C.g)(e,"current-row")}),Object(C.a)(u,"current-row")}t&&t.silent||this.table.$emit("sort-change",{column:this.states.sortingColumn,prop:this.states.sortProp,order:this.states.sortOrder}),w.a.nextTick(function(){return n.table.updateScrollY()})},sort:function(e,t){var n=this,i=t.prop,r=t.order;i&&(e.sortProp=i,e.sortOrder=r||"ascending",w.a.nextTick(function(){for(var t=0,i=e.columns.length;t0&&t[0]&&"selection"===t[0].type&&!t[0].fixed&&(t[0].fixed=!0,e.fixedColumns.unshift(t[0]));var n=t.filter(function(e){return!e.fixed});e.originColumns=[].concat(e.fixedColumns).concat(n).concat(e.rightFixedColumns);var i=Tn(n),r=Tn(e.fixedColumns),o=Tn(e.rightFixedColumns);e.leafColumnsLength=i.length,e.fixedLeafColumnsLength=r.length,e.rightFixedLeafColumnsLength=o.length,e.columns=[].concat(r).concat(i).concat(o),e.isComplex=e.fixedColumns.length>0||e.rightFixedColumns.length>0},jn.prototype.isSelected=function(e){return(this.states.selection||[]).indexOf(e)>-1},jn.prototype.clearSelection=function(){var e=this.states;e.isAllSelected=!1;var t=e.selection;e.selection.length&&(e.selection=[]),t.length>0&&this.table.$emit("selection-change",e.selection?e.selection.slice():[])},jn.prototype.setExpandRowKeys=function(e){var t=[],n=this.states.data,i=this.states.rowKey;if(!i)throw new Error("[Table] prop row-key should not be empty.");var r=In(n,i);e.forEach(function(e){var n=r[e];n&&t.push(n.row)}),this.states.expandRows=t},jn.prototype.toggleRowSelection=function(e,t){kn(this.states,e,t)&&this.table.$emit("selection-change",this.states.selection?this.states.selection.slice():[])},jn.prototype.toggleRowExpansion=function(e,t){(function(e,t,n){var i=!1,r=e.expandRows;if(void 0!==n){var o=r.indexOf(t);n?-1===o&&(r.push(t),i=!0):-1!==o&&(r.splice(o,1),i=!0)}else{var s=r.indexOf(t);-1===s?(r.push(t),i=!0):(r.splice(s,1),i=!0)}return i})(this.states,e,t)&&(this.table.$emit("expand-change",e,this.states.expandRows),this.scheduleLayout())},jn.prototype.isRowExpanded=function(e){var t=this.states,n=t.expandRows,i=void 0===n?[]:n,r=t.rowKey;return r?!!In(i,r)[Dn(e,r)]:-1!==i.indexOf(e)},jn.prototype.cleanSelection=function(){var e=this.states.selection||[],t=this.states.data,n=this.states.rowKey,i=void 0;if(n){i=[];var r=In(e,n),o=In(t,n);for(var s in r)r.hasOwnProperty(s)&&!o[s]&&i.push(r[s].row)}else i=e.filter(function(e){return-1===t.indexOf(e)});i.forEach(function(t){e.splice(e.indexOf(t),1)}),i.length&&this.table.$emit("selection-change",e?e.slice():[])},jn.prototype.clearFilter=function(e){var t=this.states,n=this.table.$refs,i=n.tableHeader,r=n.fixedTableHeader,o=n.rightFixedTableHeader,s={};i&&(s=g(s,i.filterPanels)),r&&(s=g(s,r.filterPanels)),o&&(s=g(s,o.filterPanels));var a=Object.keys(s);if(a.length)if("string"==typeof e&&(e=[e]),Array.isArray(e)){var l=e.map(function(e){return function(e,t){for(var n=null,i=0;i1?n-1:0),r=1;rthis.bodyHeight}}},e.prototype.setHeight=function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"height";if(!w.a.prototype.$isServer){var i=this.table.$el;if("string"==typeof e&&/^\d+$/.test(e)&&(e=Number(e)),this.height=e,!i&&(e||0===e))return w.a.nextTick(function(){return t.setHeight(e,n)});"number"==typeof e?(i.style[n]=e+"px",this.updateElsHeight()):"string"==typeof e&&(i.style[n]=e,this.updateElsHeight())}},e.prototype.setMaxHeight=function(e){return this.setHeight(e,"max-height")},e.prototype.updateElsHeight=function(){var e=this;if(!this.table.$ready)return w.a.nextTick(function(){return e.updateElsHeight()});var t=this.table.$refs,n=t.headerWrapper,i=t.appendWrapper,r=t.footerWrapper;if(this.appendHeight=i?i.offsetHeight:0,!this.showHeader||n){var o=this.headerHeight=this.showHeader?n.offsetHeight:0;if(this.showHeader&&n.offsetWidth>0&&(this.table.columns||[]).length>0&&o<2)return w.a.nextTick(function(){return e.updateElsHeight()});var s=this.tableHeight=this.table.$el.clientHeight;if(null!==this.height&&(!isNaN(this.height)||"string"==typeof this.height)){var a=this.footerHeight=r?r.offsetHeight:0;this.bodyHeight=s-o-a+(r?1:0)}this.fixedBodyHeight=this.scrollX?this.bodyHeight-this.gutterWidth:this.bodyHeight;var l=!this.table.data||0===this.table.data.length;this.viewportHeight=this.scrollX?s-(l?0:this.gutterWidth):s,this.updateScrollY(),this.notifyObservers("scrollable")}},e.prototype.getFlattenColumns=function(){var e=[];return this.table.columns.forEach(function(t){t.isColumnGroup?e.push.apply(e,t.columns):e.push(t)}),e},e.prototype.updateColumnsWidth=function(){if(!w.a.prototype.$isServer){var e=this.fit,t=this.table.$el.clientWidth,n=0,i=this.getFlattenColumns(),r=i.filter(function(e){return"number"!=typeof e.width});if(i.forEach(function(e){"number"==typeof e.width&&e.realWidth&&(e.realWidth=null)}),r.length>0&&e){i.forEach(function(e){n+=e.width||e.minWidth||80});var o=this.scrollY?this.gutterWidth:0;if(n<=t-o){this.scrollX=!1;var s=t-o-n;if(1===r.length)r[0].realWidth=(r[0].minWidth||80)+s;else{var a=s/r.reduce(function(e,t){return e+(t.minWidth||80)},0),l=0;r.forEach(function(e,t){if(0!==t){var n=Math.floor((e.minWidth||80)*a);l+=n,e.realWidth=(e.minWidth||80)+n}}),r[0].realWidth=(r[0].minWidth||80)+s-l}}else this.scrollX=!0,r.forEach(function(e){e.realWidth=e.minWidth});this.bodyWidth=Math.max(n,t),this.table.resizeState.width=this.bodyWidth}else i.forEach(function(e){e.width||e.minWidth?e.realWidth=e.width||e.minWidth:e.realWidth=80,n+=e.realWidth}),this.scrollX=n>t,this.bodyWidth=n;var u=this.store.states.fixedColumns;if(u.length>0){var c=0;u.forEach(function(e){c+=e.realWidth||e.width}),this.fixedWidth=c}var h=this.store.states.rightFixedColumns;if(h.length>0){var d=0;h.forEach(function(e){d+=e.realWidth||e.width}),this.rightFixedWidth=d}this.notifyObservers("columns")}},e.prototype.addObserver=function(e){this.observers.push(e)},e.prototype.removeObserver=function(e){var t=this.observers.indexOf(e);-1!==t&&this.observers.splice(t,1)},e.prototype.notifyObservers=function(e){var t=this;this.observers.forEach(function(n){switch(e){case"columns":n.onColumnsChange(t);break;case"scrollable":n.onScrollableChange(t);break;default:throw new Error("Table Layout don't have event "+e+".")}})},e}(),On={created:function(){this.tableLayout.addObserver(this)},destroyed:function(){this.tableLayout.removeObserver(this)},computed:{tableLayout:function(){var e=this.layout;if(!e&&this.table&&(e=this.table.layout),!e)throw new Error("Can not find table layout.");return e}},mounted:function(){this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout)},updated:function(){this.__updated__||(this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout),this.__updated__=!0)},methods:{onColumnsChange:function(){var e=this.$el.querySelectorAll("colgroup > col");if(e.length){var t=this.tableLayout.getFlattenColumns(),n={};t.forEach(function(e){n[e.id]=e});for(var i=0,r=e.length;i col[name=gutter]"),n=0,i=t.length;n=this.leftFixedLeafCount:"right"===this.fixed?e=this.columnsCount-this.rightFixedLeafCount},getSpan:function(e,t,n,i){var r=1,o=1,s=this.table.spanMethod;if("function"==typeof s){var a=s({row:e,column:t,rowIndex:n,columnIndex:i});Array.isArray(a)?(r=a[0],o=a[1]):"object"===(void 0===a?"undefined":An(a))&&(r=a.rowspan,o=a.colspan)}return{rowspan:r,colspan:o}},getRowStyle:function(e,t){var n=this.table.rowStyle;return"function"==typeof n?n.call(null,{row:e,rowIndex:t}):n},getRowClass:function(e,t){var n=["el-table__row"];this.table.highlightCurrentRow&&e===this.store.states.currentRow&&n.push("current-row"),this.stripe&&t%2==1&&n.push("el-table__row--striped");var i=this.table.rowClassName;return"string"==typeof i?n.push(i):"function"==typeof i&&n.push(i.call(null,{row:e,rowIndex:t})),this.store.states.expandRows.indexOf(e)>-1&&n.push("expanded"),n.join(" ")},getCellStyle:function(e,t,n,i){var r=this.table.cellStyle;return"function"==typeof r?r.call(null,{rowIndex:e,columnIndex:t,row:n,column:i}):r},getCellClass:function(e,t,n,i){var r=[i.id,i.align,i.className];this.isColumnHidden(t)&&r.push("is-hidden");var o=this.table.cellClassName;return"string"==typeof o?r.push(o):"function"==typeof o&&r.push(o.call(null,{rowIndex:e,columnIndex:t,row:n,column:i})),r.join(" ")},handleCellMouseEnter:function(e,t){var n=this.table,i=Mn(e);if(i){var r=Nn(n,i),o=n.hoverState={cell:i,column:r,row:t};n.$emit("cell-mouse-enter",o.row,o.column,o.cell,e)}var s=e.target.querySelector(".cell");if(Object(C.c)(s,"el-tooltip")&&s.childNodes.length){var a=document.createRange();if(a.setStart(s,0),a.setEnd(s,s.childNodes.length),(a.getBoundingClientRect().width+((parseInt(Object(C.b)(s,"paddingLeft"),10)||0)+(parseInt(Object(C.b)(s,"paddingRight"),10)||0))>s.offsetWidth||s.scrollWidth>s.offsetWidth)&&this.$refs.tooltip){var l=this.$refs.tooltip;this.tooltipContent=i.innerText||i.textContent,l.referenceElm=i,l.$refs.popper&&(l.$refs.popper.style.display="none"),l.doDestroy(),l.setExpectedState(!0),this.activateTooltip(l)}}},handleCellMouseLeave:function(e){var t=this.$refs.tooltip;if(t&&(t.setExpectedState(!1),t.handleClosePopper()),Mn(e)){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,n){var i=this.table,r=Mn(e),o=void 0;r&&(o=Nn(i,r))&&i.$emit("cell-"+n,t,o,r,e),i.$emit("row-"+n,t,e,o)},handleExpandClick:function(e,t){t.stopPropagation(),this.store.toggleRowExpansion(e)}}},zn=[];!w.a.prototype.$isServer&&document.addEventListener("click",function(e){zn.forEach(function(t){var n=e.target;t&&t.$el&&(n===t.$el||t.$el.contains(n)||t.handleOutsideClick&&t.handleOutsideClick(e))})});var $n=function(e){e&&zn.push(e)},Pn=function(e){-1!==zn.indexOf(e)&&zn.splice(e,1)},Fn={name:"ElTableFilterPanel",mixins:[$,c],directives:{Clickoutside:pe},components:{ElCheckbox:Kt,ElCheckboxGroup:sn},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(){var e=this;setTimeout(function(){e.showPopper=!1},16)},handleConfirm:function(){this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleReset:function(){this.filteredValue=[],this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleSelect:function(e){this.filterValue=e,null!=e?this.confirmFilter(this.filteredValue):this.confirmFilter([]),this.handleOutsideClick()},confirmFilter:function(e){this.table.store.commit("filterChange",{column:this.column,values:e}),this.table.store.updateAllSelected()}},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&&(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?$n(e):Pn(e)})},watch:{showPopper:function(e){!0===e&&parseInt(this.popperJS._popper.style.zIndex,10)1;return r&&(this.$parent.isGroup=!0),e("table",{class:"el-table__header",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id}})}),this.hasGutter?e("col",{attrs:{name:"gutter"}}):""]),e("thead",{class:[{"is-group":r,"has-gutter":this.hasGutter}]},[this._l(i,function(n,i){return e("tr",{style:t.getHeaderRowStyle(i),class:t.getHeaderRowClass(i)},[t._l(n,function(r,o){return e("th",{attrs:{colspan:r.colSpan,rowspan:r.rowSpan},on:{mousemove:function(e){return t.handleMouseMove(e,r)},mouseout:t.handleMouseOut,mousedown:function(e){return t.handleMouseDown(e,r)},click:function(e){return t.handleHeaderClick(e,r)},contextmenu:function(e){return t.handleHeaderContextMenu(e,r)}},style:t.getHeaderCellStyle(i,o,n,r),class:t.getHeaderCellClass(i,o,n,r),key:r.id},[e("div",{class:["cell",r.filteredValue&&r.filteredValue.length>0?"highlight":"",r.labelClassName]},[r.renderHeader?r.renderHeader.call(t._renderProxy,e,{column:r,$index:o,store:t.store,_self:t.$parent.$vnode.context}):r.label,r.sortable?e("span",{class:"caret-wrapper",on:{click:function(e){return t.handleSortClick(e,r)}}},[e("i",{class:"sort-caret ascending",on:{click:function(e){return t.handleSortClick(e,r,"ascending")}}}),e("i",{class:"sort-caret descending",on:{click:function(e){return t.handleSortClick(e,r,"descending")}}})]):"",r.filterable?e("span",{class:"el-table__column-filter-trigger",on:{click:function(e){return t.handleFilterClick(e,r)}}},[e("i",{class:["el-icon-arrow-down",r.filterOpened?"el-icon-arrow-up":""]})]):""])])}),t.hasGutter?e("th",{class:"gutter"}):""])})])])},props:{fixed:String,store:{required:!0},border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},components:{ElCheckbox:Kt,ElTag:q},computed:{table:function(){return this.$parent},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},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},created:function(){this.filterPanels={}},mounted:function(){var e=this.defaultSort,t=e.prop,n=e.order;this.store.commit("sort",{prop:t,order:n})},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){for(var n=0,i=0;i=this.leftFixedLeafCount:"right"===this.fixed?n=this.columnsCount-this.rightFixedLeafCount},getHeaderRowStyle:function(e){var t=this.table.headerRowStyle;return"function"==typeof t?t.call(null,{rowIndex:e}):t},getHeaderRowClass:function(e){var t=[],n=this.table.headerRowClassName;return"string"==typeof n?t.push(n):"function"==typeof n&&t.push(n.call(null,{rowIndex:e})),t.join(" ")},getHeaderCellStyle:function(e,t,n,i){var r=this.table.headerCellStyle;return"function"==typeof r?r.call(null,{rowIndex:e,columnIndex:t,row:n,column:i}):r},getHeaderCellClass:function(e,t,n,i){var r=[i.id,i.order,i.headerAlign,i.className,i.labelClassName];0===e&&this.isCellHidden(t,n)&&r.push("is-hidden"),i.children||r.push("is-leaf"),i.sortable&&r.push("is-sortable");var o=this.table.headerCellClassName;return"string"==typeof o?r.push(o):"function"==typeof o&&r.push(o.call(null,{rowIndex:e,columnIndex:t,row:n,column:i})),r.join(" ")},toggleAllSelection:function(e){e.stopPropagation(),this.store.commit("toggleAllSelection")},handleFilterClick:function(e,t){e.stopPropagation();var n=e.target,i="TH"===n.tagName?n:n.parentNode;i=i.querySelector(".el-table__column-filter-trigger")||i;var r=this.$parent,o=this.filterPanels[t.id];o&&t.filterOpened?o.showPopper=!1:(o||(o=new w.a(Yn),this.filterPanels[t.id]=o,t.filterPlacement&&(o.placement=t.filterPlacement),o.table=r,o.cell=i,o.column=t,!this.$isServer&&o.$mount(document.createElement("div"))),setTimeout(function(){o.showPopper=!0},16))},handleHeaderClick:function(e,t){!t.filters&&t.sortable?this.handleSortClick(e,t):t.filterable&&!t.sortable&&this.handleFilterClick(e,t),this.$parent.$emit("header-click",t,e)},handleHeaderContextMenu:function(e,t){this.$parent.$emit("header-contextmenu",t,e)},handleMouseDown:function(e,t){var n=this;if(!this.$isServer&&!(t.children&&t.children.length>0)&&this.draggingColumn&&this.border){this.dragging=!0,this.$parent.resizeProxyVisible=!0;var i=this.$parent,r=i.$el.getBoundingClientRect().left,o=this.$el.querySelector("th."+t.id),s=o.getBoundingClientRect(),a=s.left-r+30;Object(C.a)(o,"noclick"),this.dragState={startMouseLeft:e.clientX,startLeft:s.right-r,startColumnLeft:s.left-r,tableLeft:r};var l=i.$refs.resizeProxy;l.style.left=this.dragState.startLeft+"px",document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var u=function(e){var t=e.clientX-n.dragState.startMouseLeft,i=n.dragState.startLeft+t;l.style.left=Math.max(a,i)+"px"};document.addEventListener("mousemove",u),document.addEventListener("mouseup",function r(){if(n.dragging){var s=n.dragState,a=s.startColumnLeft,c=s.startLeft,h=parseInt(l.style.left,10)-a;t.width=t.realWidth=h,i.$emit("header-dragend",t.width,c-a,t,e),n.store.scheduleLayout(),document.body.style.cursor="",n.dragging=!1,n.draggingColumn=null,n.dragState={},i.resizeProxyVisible=!1}document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",r),document.onselectstart=null,document.ondragstart=null,setTimeout(function(){Object(C.g)(o,"noclick")},0)})}},handleMouseMove:function(e,t){if(!(t.children&&t.children.length>0)){for(var n=e.target;n&&"TH"!==n.tagName;)n=n.parentNode;if(t&&t.resizable&&!this.dragging&&this.border){var i=n.getBoundingClientRect(),r=document.body.style;i.width>12&&i.right-e.pageX<8?(r.cursor="col-resize",Object(C.c)(n,"is-sortable")&&(n.style.cursor="col-resize"),this.draggingColumn=t):this.dragging||(r.cursor="",Object(C.c)(n,"is-sortable")&&(n.style.cursor="pointer"),this.draggingColumn=null)}}},handleMouseOut:function(){this.$isServer||(document.body.style.cursor="")},toggleOrder:function(e){var t=e.order,n=e.sortOrders;if(""===t)return n[0];var i=n.indexOf(t||null);return n[i>n.length-2?0:i+1]},handleSortClick:function(e,t,n){e.stopPropagation();for(var i=t.order===n?null:n||this.toggleOrder(t),r=e.target;r&&"TH"!==r.tagName;)r=r.parentNode;if(r&&"TH"===r.tagName&&Object(C.c)(r,"noclick"))Object(C.g)(r,"noclick");else if(t.sortable){var o=this.store.states,s=o.sortProp,a=void 0,l=o.sortingColumn;(l!==t||l===t&&null===l.order)&&(l&&(l.order=null),o.sortingColumn=t,s=t.property),i?a=t.order=i:(a=t.order=null,o.sortingColumn=null,s=null),o.sortProp=s,o.sortOrder=a,this.store.commit("changeSortCondition")}}},data:function(){return{draggingColumn:null,dragging:!1,dragState:{}}}},Qn={name:"ElTableFooter",mixins:[On],render:function(e){var t=this,n=[];return this.summaryMethod?n=this.summaryMethod({columns:this.columns,data:this.store.states.data}):this.columns.forEach(function(e,i){if(0!==i){var r=t.store.states.data.map(function(t){return Number(t[e.property])}),o=[],s=!0;r.forEach(function(e){if(!isNaN(e)){s=!1;var t=(""+e).split(".")[1];o.push(t?t.length:0)}});var a=Math.max.apply(null,o);n[i]=s?"":r.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:parseFloat((e+t).toFixed(Math.min(a,20)))},0)}else n[i]=t.sumText}),e("table",{class:"el-table__footer",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id}})}),this.hasGutter?e("col",{attrs:{name:"gutter"}}):""]),e("tbody",{class:[{"has-gutter":this.hasGutter}]},[e("tr",[this._l(this.columns,function(i,r){return e("td",{attrs:{colspan:i.colSpan,rowspan:i.rowSpan},class:[i.id,i.headerAlign,i.className||"",t.isCellHidden(r,t.columns,i)?"is-hidden":"",i.children?"":"is-leaf",i.labelClassName]},[e("div",{class:["cell",i.labelClassName]},[n[r]])])}),this.hasGutter?e("th",{class:"gutter"}):""])])])},props:{fixed:String,store:{required:!0},summaryMethod:Function,sumText:String,border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},computed:{table:function(){return this.$parent},isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},methods:{isCellHidden:function(e,t,n){if(!0===this.fixed||"left"===this.fixed)return e>=this.leftFixedLeafCount;if("right"===this.fixed){for(var i=0,r=0;r=this.columnsCount-this.rightFixedCount)}}},Vn=1,Hn={name:"ElTable",mixins:[c,h],directives:{Mousewheel:yn},props:{data:{type:Array,default:function(){return[]}},size:String,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],cellClassName:[String,Function],cellStyle:[Object,Function],headerRowClassName:[String,Function],headerRowStyle:[Object,Function],headerCellClassName:[String,Function],headerCellStyle:[Object,Function],highlightCurrentRow:Boolean,currentRowKey:[String,Number],emptyText:String,expandRowKeys:Array,defaultExpandAll:Boolean,defaultSort:Object,tooltipEffect:String,spanMethod:Function,selectOnIndeterminate:{type:Boolean,default:!0}},components:{TableHeader:Bn,TableFooter:Qn,TableBody:En,ElCheckbox:Kt},methods:{getMigratingConfig:function(){return{events:{expand:"expand is renamed to expand-change"}}},setCurrentRow:function(e){this.store.commit("setCurrentRow",e)},toggleRowSelection:function(e,t){this.store.toggleRowSelection(e,t),this.store.updateAllSelected()},toggleRowExpansion:function(e,t){this.store.toggleRowExpansion(e,t)},clearSelection:function(){this.store.clearSelection()},clearFilter:function(e){this.store.clearFilter(e)},clearSort:function(){this.store.clearSort()},handleMouseLeave:function(){this.store.commit("setHoverRow",null),this.hoverState&&(this.hoverState=null)},updateScrollY:function(){this.layout.updateScrollY(),this.layout.updateColumnsWidth()},handleFixedMousewheel:function(e,t){var n=this.bodyWrapper;if(Math.abs(t.spinY)>0){var i=n.scrollTop;t.pixelY<0&&0!==i&&e.preventDefault(),t.pixelY>0&&n.scrollHeight-n.clientHeight>i&&e.preventDefault(),n.scrollTop+=Math.ceil(t.pixelY/5)}else n.scrollLeft+=Math.ceil(t.pixelX/5)},handleHeaderFooterMousewheel:function(e,t){var n=t.pixelX,i=t.pixelY;Math.abs(n)>=Math.abs(i)&&(e.preventDefault(),this.bodyWrapper.scrollLeft+=t.pixelX/5)},bindEvents:function(){var e=this.$refs,t=e.headerWrapper,n=e.footerWrapper,i=this.$refs,r=this;this.bodyWrapper.addEventListener("scroll",function(){t&&(t.scrollLeft=this.scrollLeft),n&&(n.scrollLeft=this.scrollLeft),i.fixedBodyWrapper&&(i.fixedBodyWrapper.scrollTop=this.scrollTop),i.rightFixedBodyWrapper&&(i.rightFixedBodyWrapper.scrollTop=this.scrollTop);var e=this.scrollWidth-this.offsetWidth-1,o=this.scrollLeft;r.scrollPosition=o>=e?"right":0===o?"left":"middle"}),this.fit&&X(this.$el,this.resizeListener)},resizeListener:function(){if(this.$ready){var e=!1,t=this.$el,n=this.resizeState,i=n.width,r=n.height,o=t.offsetWidth;i!==o&&(e=!0);var s=t.offsetHeight;(this.height||this.shouldUpdateHeight)&&r!==s&&(e=!0),e&&(this.resizeState.width=o,this.resizeState.height=s,this.doLayout())}},doLayout:function(){this.layout.updateColumnsWidth(),this.shouldUpdateHeight&&this.layout.updateElsHeight()},sort:function(e,t){this.store.commit("sort",{prop:e,order:t})},toggleAllSelection:function(){this.store.commit("toggleAllSelection")}},created:function(){var e=this;this.tableId="el-table_"+Vn++,this.debouncedUpdateLayout=ae()(50,function(){return e.doLayout()})},computed:{tableSize:function(){return this.size||(this.$ELEMENT||{}).size},bodyWrapper:function(){return this.$refs.bodyWrapper},shouldUpdateHeight:function(){return this.height||this.maxHeight||this.fixedColumns.length>0||this.rightFixedColumns.length>0},selection:function(){return this.store.states.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},bodyWidth:function(){var e=this.layout,t=e.bodyWidth,n=e.scrollY,i=e.gutterWidth;return t?t-(n?i:0)+"px":""},bodyHeight:function(){return this.height?{height:this.layout.bodyHeight?this.layout.bodyHeight+"px":""}:this.maxHeight?{"max-height":(this.showHeader?this.maxHeight-this.layout.headerHeight-this.layout.footerHeight:this.maxHeight-this.layout.footerHeight)+"px"}:{}},fixedBodyHeight:function(){if(this.height)return{height:this.layout.fixedBodyHeight?this.layout.fixedBodyHeight+"px":""};if(this.maxHeight){var e=this.layout.scrollX?this.maxHeight-this.layout.gutterWidth:this.maxHeight;return this.showHeader&&(e-=this.layout.headerHeight),{"max-height":(e-=this.layout.footerHeight)+"px"}}return{}},fixedHeight:function(){return this.maxHeight?this.showSummary?{bottom:0}:{bottom:this.layout.scrollX&&this.data.length?this.layout.gutterWidth+"px":""}:this.showSummary?{height:this.layout.tableHeight?this.layout.tableHeight+"px":""}:{height:this.layout.viewportHeight?this.layout.viewportHeight+"px":""}}},watch:{height:{immediate:!0,handler:function(e){this.layout.setHeight(e)}},maxHeight:{immediate:!0,handler:function(e){this.layout.setMaxHeight(e)}},currentRowKey:function(e){this.store.setCurrentRowKey(e)},data:{immediate:!0,handler:function(e){var t=this;this.store.commit("setData",e),this.$ready&&this.$nextTick(function(){t.doLayout()})}},expandRowKeys:{immediate:!0,handler:function(e){e&&this.store.setExpandRowKeys(e)}}},destroyed:function(){this.resizeListener&&ee(this.$el,this.resizeListener)},mounted:function(){var e=this;this.bindEvents(),this.store.updateColumns(),this.doLayout(),this.resizeState={width:this.$el.offsetWidth,height:this.$el.offsetHeight},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 Sn(this,{rowKey:this.rowKey,defaultExpandAll:this.defaultExpandAll,selectOnIndeterminate:this.selectOnIndeterminate});return{layout:new Ln({store:e,table:this,fit:this.fit,showHeader:this.showHeader}),store:e,isHidden:!1,renderExpanded:null,resizeProxyVisible:!1,resizeState:{width:null,height:null},isGroup:!1,scrollPosition:"left"}}},Wn=Object(r.a)(Hn,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-table",class:[{"el-table--fit":e.fit,"el-table--striped":e.stripe,"el-table--border":e.border||e.isGroup,"el-table--hidden":e.isHidden,"el-table--group":e.isGroup,"el-table--fluid-height":e.maxHeight,"el-table--scrollable-x":e.layout.scrollX,"el-table--scrollable-y":e.layout.scrollY,"el-table--enable-row-hover":!e.store.states.isComplex,"el-table--enable-row-transition":0!==(e.store.states.data||[]).length&&(e.store.states.data||[]).length<100},e.tableSize?"el-table--"+e.tableSize:""],on:{mouseleave:function(t){e.handleMouseLeave(t)}}},[n("div",{ref:"hiddenColumns",staticClass:"hidden-columns"},[e._t("default")],2),e.showHeader?n("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:e.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"headerWrapper",staticClass:"el-table__header-wrapper"},[n("table-header",{ref:"tableHeader",style:{width:e.layout.bodyWidth?e.layout.bodyWidth+"px":""},attrs:{store:e.store,border:e.border,"default-sort":e.defaultSort}})],1):e._e(),n("div",{ref:"bodyWrapper",staticClass:"el-table__body-wrapper",class:[e.layout.scrollX?"is-scrolling-"+e.scrollPosition:"is-scrolling-none"],style:[e.bodyHeight]},[n("table-body",{style:{width:e.bodyWidth},attrs:{context:e.context,store:e.store,stripe:e.stripe,"row-class-name":e.rowClassName,"row-style":e.rowStyle,highlight:e.highlightCurrentRow}}),e.data&&0!==e.data.length?e._e():n("div",{ref:"emptyBlock",staticClass:"el-table__empty-block",style:{width:e.bodyWidth}},[n("span",{staticClass:"el-table__empty-text"},[e._t("empty",[e._v(e._s(e.emptyText||e.t("el.table.emptyText")))])],2)]),e.$slots.append?n("div",{ref:"appendWrapper",staticClass:"el-table__append-wrapper"},[e._t("append")],2):e._e()],1),e.showSummary?n("div",{directives:[{name:"show",rawName:"v-show",value:e.data&&e.data.length>0,expression:"data && data.length > 0"},{name:"mousewheel",rawName:"v-mousewheel",value:e.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"footerWrapper",staticClass:"el-table__footer-wrapper"},[n("table-footer",{style:{width:e.layout.bodyWidth?e.layout.bodyWidth+"px":""},attrs:{store:e.store,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?n("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:e.handleFixedMousewheel,expression:"handleFixedMousewheel"}],ref:"fixedWrapper",staticClass:"el-table__fixed",style:[{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},e.fixedHeight]},[e.showHeader?n("div",{ref:"fixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[n("table-header",{ref:"fixedTableHeader",style:{width:e.bodyWidth},attrs:{fixed:"left",border:e.border,store:e.store}})],1):e._e(),n("div",{ref:"fixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:e.layout.headerHeight+"px"},e.fixedBodyHeight]},[n("table-body",{style:{width:e.bodyWidth},attrs:{fixed:"left",store:e.store,stripe:e.stripe,highlight:e.highlightCurrentRow,"row-class-name":e.rowClassName,"row-style":e.rowStyle}}),e.$slots.append?n("div",{staticClass:"el-table__append-gutter",style:{height:e.layout.appendHeight+"px"}}):e._e()],1),e.showSummary?n("div",{directives:[{name:"show",rawName:"v-show",value:e.data&&e.data.length>0,expression:"data && data.length > 0"}],ref:"fixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[n("table-footer",{style:{width:e.bodyWidth},attrs:{fixed:"left",border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,store:e.store}})],1):e._e()]):e._e(),e.rightFixedColumns.length>0?n("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:e.handleFixedMousewheel,expression:"handleFixedMousewheel"}],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||0)+"px":""},e.fixedHeight]},[e.showHeader?n("div",{ref:"rightFixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[n("table-header",{ref:"rightFixedTableHeader",style:{width:e.bodyWidth},attrs:{fixed:"right",border:e.border,store:e.store}})],1):e._e(),n("div",{ref:"rightFixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:e.layout.headerHeight+"px"},e.fixedBodyHeight]},[n("table-body",{style:{width:e.bodyWidth},attrs:{fixed:"right",store:e.store,stripe:e.stripe,"row-class-name":e.rowClassName,"row-style":e.rowStyle,highlight:e.highlightCurrentRow}})],1),e.showSummary?n("div",{directives:[{name:"show",rawName:"v-show",value:e.data&&e.data.length>0,expression:"data && data.length > 0"}],ref:"rightFixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[n("table-footer",{style:{width:e.bodyWidth},attrs:{fixed:"right",border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,store:e.store}})],1):e._e()]):e._e(),e.rightFixedColumns.length>0?n("div",{ref:"rightFixedPatch",staticClass:"el-table__fixed-right-patch",style:{width:e.layout.scrollY?e.layout.gutterWidth+"px":"0",height:e.layout.headerHeight+"px"}}):e._e(),n("div",{directives:[{name:"show",rawName:"v-show",value:e.resizeProxyVisible,expression:"resizeProxyVisible"}],ref:"resizeProxy",staticClass:"el-table__column-resize-proxy"})])},[],!1,null,null,null);Wn.options.__file="table.vue";var Gn=Wn.exports;Gn.install=function(e){e.component(Gn.name,Gn)};var qn=Gn,Zn=1,Kn={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:""}},Jn={selection:{renderHeader:function(e,t){var n=t.store;return e("el-checkbox",{attrs:{disabled:n.states.data&&0===n.states.data.length,indeterminate:n.states.selection.length>0&&!this.isAllSelected,value:this.isAllSelected},nativeOn:{click:this.toggleAllSelection}})},renderCell:function(e,t){var n=t.row,i=t.column,r=t.store,o=t.$index;return e("el-checkbox",{nativeOn:{click:function(e){return e.stopPropagation()}},attrs:{value:r.isSelected(n),disabled:!!i.selectable&&!i.selectable.call(null,n,o)},on:{input:function(){r.commit("rowSelectedChanged",n)}}})},sortable:!1,resizable:!1},index:{renderHeader:function(e,t){return t.column.label||"#"},renderCell:function(e,t){var n=t.$index,i=n+1,r=t.column.index;return"number"==typeof r?i=n+r:"function"==typeof r&&(i=r(n)),e("div",[i])},sortable:!1},expand:{renderHeader:function(e,t){return t.column.label||""},renderCell:function(e,t,n){var i=t.row;return e("div",{class:"el-table__expand-icon "+(t.store.states.expandRows.indexOf(i)>-1?"el-table__expand-icon--expanded":""),on:{click:function(e){return n.handleExpandClick(i,e)}}},[e("i",{class:"el-icon el-icon-arrow-right"})])},sortable:!1,resizable:!1,className:"el-table__expand-column"}},Xn=function(e,t){var n=t.row,i=t.column,r=t.$index,o=i.property,s=o&&Object(Y.f)(n,o).v;return i&&i.formatter?i.formatter(n,i,s,r):s},ei=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=null)),e},ti=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=80)),e},ni={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,sortBy:[String,Function,Array],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,filterPlacement:String,filterMultiple:{type:Boolean,default:!0},index:[Number,Function],sortOrders:{type:Array,default:function(){return["ascending","descending",null]},validator:function(e){return e.every(function(e){return["ascending","descending",null].indexOf(e)>-1})}}},data:function(){return{isSubColumn:!1,columns:[]}},beforeCreate:function(){this.row={},this.column={},this.$index=0},components:{ElCheckbox:Kt,ElTag:q},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e},columnOrTableParent:function(){for(var e=this.$parent;e&&!e.tableId&&!e.columnId;)e=e.$parent;return e}},created:function(){var e=this;this.$createElement;this.customRender=this.$options.render,this.$options.render=function(t){return t("div",e.$slots.default)};var t=this.columnOrTableParent,n=this.owner;this.isSubColumn=n!==t,this.columnId=(t.tableId||t.columnId)+"_column_"+Zn++;var i=this.type,r=ei(this.width),o=ti(this.minWidth),s=function(e,t){var n={};for(var i in g(n,Kn[e||"default"]),t)if(t.hasOwnProperty(i)){var r=t[i];void 0!==r&&(n[i]=r)}return n.minWidth||(n.minWidth=80),n.realWidth=void 0===n.width?n.minWidth:n.width,n}(i,{id:this.columnId,columnKey:this.columnKey,label:this.label,className:this.className,labelClassName:this.labelClassName,property:this.prop||this.property,type:i,renderCell:null,renderHeader:this.renderHeader,minWidth:o,width:r,isColumnGroup:!1,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,sortBy:this.sortBy,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||[],filterPlacement:this.filterPlacement||"",index:this.index,sortOrders:this.sortOrders}),a=Jn[i]||{};Object.keys(a).forEach(function(e){var t=a[e];void 0!==t&&("renderHeader"===e&&("selection"===i&&s[e]?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set render-header function."):t=s[e]||t),s[e]="className"===e?s[e]+" "+t:t)}),this.renderHeader&&console.warn("[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header."),this.columnConfig=s;var l=s.renderCell,u=this;if("expand"===i)return n.renderExpanded=function(e,t){return u.$scopedSlots.default?u.$scopedSlots.default(t):u.$slots.default},void(s.renderCell=function(e,t){return e("div",{class:"cell"},[l(e,t,this._renderProxy)])});s.renderCell=function(e,t){return u.$scopedSlots.default&&(l=function(){return u.$scopedSlots.default(t)}),l||(l=Xn),u.showOverflowTooltip||u.showTooltipWhenOverflow?e("div",{class:"cell el-tooltip",style:{width:(t.column.realWidth||t.column.width)-1+"px"}},[l(e,t)]):e("div",{class:"cell"},[l(e,t)])}},destroyed:function(){if(this.$parent){var e=this.$parent;this.owner.store.commit("removeColumn",this.columnConfig,this.isSubColumn?e.columnConfig:null)}},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||this.align))},width:function(e){this.columnConfig&&(this.columnConfig.width=ei(e),this.owner.store.scheduleLayout())},minWidth:function(e){this.columnConfig&&(this.columnConfig.minWidth=ti(e),this.owner.store.scheduleLayout())},fixed:function(e){this.columnConfig&&(this.columnConfig.fixed=e,this.owner.store.scheduleLayout(!0))},sortable:function(e){this.columnConfig&&(this.columnConfig.sortable=e)},index:function(e){this.columnConfig&&(this.columnConfig.index=e)},formatter:function(e){this.columnConfig&&(this.columnConfig.formatter=e)},className:function(e){this.columnConfig&&(this.columnConfig.className=e)},labelClassName:function(e){this.columnConfig&&(this.columnConfig.labelClassName=e)}},mounted:function(){var e=this,t=this.owner,n=this.columnOrTableParent,i=void 0;i=this.isSubColumn?[].indexOf.call(n.$el.children,this.$el):[].indexOf.call(n.$refs.hiddenColumns.children,this.$el),this.$scopedSlots.header&&("selection"===this.type?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set scoped-slot header."):this.columnConfig.renderHeader=function(t,n){return e.$scopedSlots.header(n)}),t.store.commit("insertColumn",this.columnConfig,i,this.isSubColumn?n.columnConfig:null)},install:function(e){e.component(ni.name,ni)}},ii=ni,ri=n(21),oi=n.n(ri),si=["sun","mon","tue","wed","thu","fri","sat"],ai=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],li=function(){return{dayNamesShort:si.map(function(e){return Object(u.b)("el.datepicker.weeks."+e)}),dayNames:si.map(function(e){return Object(u.b)("el.datepicker.weeks."+e)}),monthNamesShort:ai.map(function(e){return Object(u.b)("el.datepicker.months."+e)}),monthNames:ai.map(function(e,t){return Object(u.b)("el.datepicker.month"+(t+1))}),amPm:["am","pm"]}},ui=function(e){return null!=e&&(!isNaN(new Date(e).getTime())&&!Array.isArray(e))},ci=function(e){return e instanceof Date},hi=function(e,t){return(e=function(e){return ui(e)?new Date(e):null}(e))?oi.a.format(e,t||"yyyy-MM-dd",li()):""},di=function(e,t){return oi.a.parse(e,t||"yyyy-MM-dd",li())},pi=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},fi=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()-t)},mi=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()+t)},gi=function(e){if(!ui(e))return null;var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var n=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-n.getTime())/864e5-3+(n.getDay()+6)%7)/7)};function vi(e,t,n,i){for(var r=t;r2&&void 0!==arguments[2]?arguments[2]:"HH:mm:ss";if(0===t.length)return e;var i=function(e){return oi.a.parse(oi.a.format(e,n),n)},r=i(e),o=t.map(function(e){return e.map(i)});if(o.some(function(e){return r>=e[0]&&r<=e[1]}))return e;var s=o[0][0],a=o[0][0];return o.forEach(function(e){s=new Date(Math.min(e[0],s)),a=new Date(Math.max(e[1],s))}),bi(r1&&void 0!==arguments[1]?arguments[1]:1,n=e.getFullYear(),i=e.getMonth();return _i(e,n-t,i)},Ti=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,n=e.getFullYear(),i=e.getMonth();return _i(e,n+t,i)},Si=function(e){return e.replace(/\W?m{1,2}|\W?ZZ/g,"").replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi,"").trim()},Li=function(e){return e.replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?y{2,4}/g,"").trim()},Oi={props:{appendToBody:$.props.appendToBody,offset:$.props.offset,boundariesPadding:$.props.boundariesPadding,arrowOffset:$.props.arrowOffset},methods:$.methods,data:function(){return g({visibleArrow:!0},$.data)},beforeDestroy:$.beforeDestroy},Ai={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"},Ei=["date","datetime","time","time-select","week","month","year","daterange","timerange","datetimerange","dates"],zi=function(e,t){return"timestamp"===t?e.getTime():hi(e,t)},$i=function(e,t){return"timestamp"===t?new Date(Number(e)):di(e,t)},Pi=function(e,t){if(Array.isArray(e)&&2===e.length){var n=e[0],i=e[1];if(n&&i)return[zi(n,t),zi(i,t)]}return""},Fi=function(e,t,n){if(Array.isArray(e)||(e=e.split(n)),2===e.length){var i=e[0],r=e[1];return[$i(i,t),$i(r,t)]}return[]},Ui={default:{formatter:function(e){return e?""+e:""},parser:function(e){return void 0===e||""===e?null:e}},week:{formatter:function(e,t){var n=gi(e),i=e.getMonth(),r=new Date(e);1===n&&11===i&&(r.setHours(0,0,0,0),r.setDate(r.getDate()+3-(r.getDay()+6)%7));var o=hi(r,t);return o=/WW/.test(o)?o.replace(/WW/,n<10?"0"+n:n):o.replace(/W/,n)},parser:function(e){var t=(e||"").split("w");if(2===t.length){var n=Number(t[0]),i=Number(t[1]);if(!isNaN(n)&&!isNaN(i)&&i<54)return e}return null}},date:{formatter:zi,parser:$i},datetime:{formatter:zi,parser:$i},daterange:{formatter:Pi,parser:Fi},datetimerange:{formatter:Pi,parser:Fi},timerange:{formatter:Pi,parser:Fi},time:{formatter:zi,parser:$i},month:{formatter:zi,parser:$i},year:{formatter:zi,parser:$i},number:{formatter:function(e){return e?""+e:""},parser:function(e){var t=Number(e);return isNaN(e)?null:t}},dates:{formatter:function(e,t){return e.map(function(e){return zi(e,t)})},parser:function(e,t){return("string"==typeof e?e.split(", "):e).map(function(e){return e instanceof Date?e:$i(e,t)})}}},Yi={left:"bottom-start",center:"bottom",right:"bottom-end"},Ri=function(e,t,n){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"-";return e?(0,(Ui[n]||Ui.default).parser)(e,t||Ai[n],i):null},Bi=function(e,t,n){return e?(0,(Ui[n]||Ui.default).formatter)(e,t||Ai[n]):null},Qi=function(e,t){var n=function(e,t){var n=e instanceof Date,i=t instanceof Date;return n&&i?e.getTime()===t.getTime():!n&&!i&&e===t},i=e instanceof Array,r=t instanceof Array;return i&&r?e.length===t.length&&e.every(function(e,i){return n(e,t[i])}):!i&&!r&&n(e,t)},Vi=function(e){return"string"==typeof e||e instanceof String},Hi=function(e){return null==e||Vi(e)||Array.isArray(e)&&2===e.length&&e.every(Vi)},Wi={mixins:[a,Oi],inject:{elForm:{default:""},elFormItem:{default:""}},props:{size:String,format:String,valueFormat:String,readonly:Boolean,placeholder:String,startPlaceholder:String,endPlaceholder:String,prefixIcon:String,clearIcon:{type:String,default:"el-icon-circle-close"},name:{default:"",validator:Hi},disabled:Boolean,clearable:{type:Boolean,default:!0},id:{default:"",validator:Hi},popperClass:String,editable:{type:Boolean,default:!0},align:{type:String,default:"left"},value:{},defaultValue:{},defaultTime:{},rangeSeparator:{default:"-"},pickerOptions:{},unlinkPanels:Boolean,validateEvent:{type:Boolean,default:!0}},components:{ElInput:M},directives:{Clickoutside:pe},data:function(){return{pickerVisible:!1,showClose:!1,userInput:null,valueOnOpen:null,unwatchPickerOptions:null}},watch:{pickerVisible:function(e){this.readonly||this.pickerDisabled||(e?(this.showPicker(),this.valueOnOpen=Array.isArray(this.value)?[].concat(this.value):this.value):(this.hidePicker(),this.emitChange(this.value),this.userInput=null,this.validateEvent&&this.dispatch("ElFormItem","el.form.blur"),this.$emit("blur",this),this.blur()))},parsedValue:{immediate:!0,handler:function(e){this.picker&&(this.picker.value=e)}},defaultValue:function(e){this.picker&&(this.picker.defaultValue=e)},value:function(e,t){Qi(e,t)||this.pickerVisible||!this.validateEvent||this.dispatch("ElFormItem","el.form.change",e)}},computed:{ranged:function(){return this.type.indexOf("range")>-1},reference:function(){var e=this.$refs.reference;return e.$el||e},refInput:function(){return this.reference?[].slice.call(this.reference.querySelectorAll("input")):[]},valueIsEmpty:function(){var e=this.value;if(Array.isArray(e)){for(var t=0,n=e.length;t0&&void 0!==arguments[0]?arguments[0]:"",n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];e.userInput=null,e.pickerVisible=e.picker.visible=n,e.emitInput(t),e.picker.resetView&&e.picker.resetView()}),this.picker.$on("select-range",function(t,n,i){0!==e.refInput.length&&(i&&"min"!==i?"max"===i&&(e.refInput[1].setSelectionRange(t,n),e.refInput[1].focus()):(e.refInput[0].setSelectionRange(t,n),e.refInput[0].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))},emitChange:function(e){Qi(e,this.valueOnOpen)||(this.$emit("change",e),this.valueOnOpen=e,this.validateEvent&&this.dispatch("ElFormItem","el.form.change",e))},emitInput:function(e){var t=this.formatToValue(e);Qi(this.value,t)||this.$emit("input",t)},isValidValue:function(e){return this.picker||this.mountPicker(),!this.picker.isValidValue||e&&this.picker.isValidValue(e)}}},Gi=Object(r.a)(Wi,function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.ranged?n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor el-range-editor el-input__inner",class:["el-date-editor--"+e.type,e.pickerSize?"el-range-editor--"+e.pickerSize:"",e.pickerDisabled?"is-disabled":"",e.pickerVisible?"is-active":""],on:{click:e.handleRangeClick,mouseenter:e.handleMouseEnter,mouseleave:function(t){e.showClose=!1},keydown:e.handleKeydown}},[n("i",{class:["el-input__icon","el-range__icon",e.triggerClass]}),n("input",e._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:e.startPlaceholder,disabled:e.pickerDisabled,readonly:!e.editable||e.readonly,name:e.name&&e.name[0]},domProps:{value:e.displayValue&&e.displayValue[0]},on:{input:e.handleStartInput,change:e.handleStartChange,focus:e.handleFocus}},"input",e.firstInputId,!1)),e._t("range-separator",[n("span",{staticClass:"el-range-separator"},[e._v(e._s(e.rangeSeparator))])]),n("input",e._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:e.endPlaceholder,disabled:e.pickerDisabled,readonly:!e.editable||e.readonly,name:e.name&&e.name[1]},domProps:{value:e.displayValue&&e.displayValue[1]},on:{input:e.handleEndInput,change:e.handleEndChange,focus:e.handleFocus}},"input",e.secondInputId,!1)),e.haveTrigger?n("i",{staticClass:"el-input__icon el-range__close-icon",class:[e.showClose?""+e.clearIcon:""],on:{click:e.handleClickIcon}}):e._e()],2):n("el-input",e._b({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||"dates"===e.type,disabled:e.pickerDisabled,size:e.pickerSize,name:e.name,placeholder:e.placeholder,value:e.displayValue,validateEvent:!1},on:{focus:e.handleFocus,input:function(t){return e.userInput=t},change:e.handleChange},nativeOn:{keydown:function(t){return e.handleKeydown(t)},mouseenter:function(t){return e.handleMouseEnter(t)},mouseleave:function(t){e.showClose=!1}}},"el-input",e.firstInputId,!1),[n("i",{staticClass:"el-input__icon",class:e.triggerClass,attrs:{slot:"prefix"},on:{click:e.handleFocus},slot:"prefix"}),e.haveTrigger?n("i",{staticClass:"el-input__icon",class:[e.showClose?""+e.clearIcon:""],attrs:{slot:"suffix"},on:{click:e.handleClickIcon},slot:"suffix"}):e._e()])},[],!1,null,null,null);Gi.options.__file="picker.vue";var qi=Gi.exports,Zi={components:{ElScrollbar:oe},directives:{repeatClick:Tt},props:{date:{},defaultValue:{},showSeconds:{type:Boolean,default:!0},arrowControl:Boolean,amPmMode:{type:String,default:""}},computed:{hours:function(){return this.date.getHours()},minutes:function(){return this.date.getMinutes()},seconds:function(){return this.date.getSeconds()},hoursList:function(){return function(e){var t=[],n=[];if((e||[]).forEach(function(e){var t=e.map(function(e){return e.getHours()});n=n.concat(function(e,t){for(var n=[],i=e;i<=t;i++)n.push(i);return n}(t[0],t[1]))}),n.length)for(var i=0;i<24;i++)t[i]=-1===n.indexOf(i);else for(var r=0;r<24;r++)t[r]=!1;return t}(this.selectableRange)},minutesList:function(){return e=this.selectableRange,t=this.hours,n=new Array(60),e.length>0?e.forEach(function(e){var i=e[0],r=e[1],o=i.getHours(),s=i.getMinutes(),a=r.getHours(),l=r.getMinutes();o===t&&a!==t?vi(n,s,60,!0):o===t&&a===t?vi(n,s,l+1,!0):o!==t&&a===t?vi(n,0,l+1,!0):ot&&vi(n,0,60,!0)}):vi(n,0,60,!0),n;var e,t,n},arrowHourList:function(){var e=this.hours;return[e>0?e-1:void 0,e,e<23?e+1:void 0]},arrowMinuteList:function(){var e=this.minutes;return[e>0?e-1:void 0,e,e<59?e+1:void 0]},arrowSecondList:function(){var e=this.seconds;return[e>0?e-1:void 0,e,e<59?e+1:void 0]}},data:function(){return{selectableRange:[],currentScrollbar:null}},mounted:function(){var e=this;this.$nextTick(function(){!e.arrowControl&&e.bindScrollEvent()})},methods:{increase:function(){this.scrollDown(1)},decrease:function(){this.scrollDown(-1)},modifyDateField:function(e,t){switch(e){case"hours":this.$emit("change",Mi(this.date,t,this.minutes,this.seconds));break;case"minutes":this.$emit("change",Mi(this.date,this.hours,t,this.seconds));break;case"seconds":this.$emit("change",Mi(this.date,this.hours,this.minutes,t))}},handleClick:function(e,t){var n=t.value;t.disabled||(this.modifyDateField(e,n),this.emitSelectRange(e),this.adjustSpinner(e,n))},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),this.currentScrollbar=e},bindScrollEvent:function(){var e=this,t=function(t){e.$refs[t].wrap.onscroll=function(n){e.handleScroll(t,n)}};t("hours"),t("minutes"),t("seconds")},handleScroll:function(e){var t=Math.min(Math.floor((this.$refs[e].wrap.scrollTop-(.5*this.scrollBarHeight(e)-10)/this.typeItemHeight(e)+3)/this.typeItemHeight(e)),"hours"===e?23:59);this.modifyDateField(e,t)},adjustSpinners:function(){this.adjustSpinner("hours",this.hours),this.adjustSpinner("minutes",this.minutes),this.adjustSpinner("seconds",this.seconds)},adjustCurrentSpinner:function(e){this.adjustSpinner(e,this[e])},adjustSpinner:function(e,t){if(!this.arrowControl){var n=this.$refs[e].wrap;n&&(n.scrollTop=Math.max(0,t*this.typeItemHeight(e)))}},scrollDown:function(e){this.currentScrollbar||this.emitSelectRange("hours");var t=this.currentScrollbar,n=this.hoursList,i=this[t];if("hours"===this.currentScrollbar){var r=Math.abs(e);e=e>0?1:-1;for(var o=n.length;o--&&r;)n[i=(i+e+n.length)%n.length]||r--;if(n[i])return}else i=(i+e+60)%60;this.modifyDateField(t,i),this.adjustSpinner(t,i)},amPm:function(e){if(!("a"===this.amPmMode.toLowerCase()))return"";var t=e<12?" am":" pm";return"A"===this.amPmMode&&(t=t.toUpperCase()),t},typeItemHeight:function(e){return this.$refs[e].$el.querySelector("li").offsetHeight},scrollBarHeight:function(e){return this.$refs[e].$el.offsetHeight}}},Ki=Object(r.a)(Zi,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-time-spinner",class:{"has-seconds":e.showSeconds}},[e.arrowControl?e._e():[n("el-scrollbar",{ref:"hours",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")},mousemove:function(t){e.adjustCurrentSpinner("hours")}}},e._l(e.hoursList,function(t,i){return n("li",{key:i,staticClass:"el-time-spinner__item",class:{active:i===e.hours,disabled:t},on:{click:function(n){e.handleClick("hours",{value:i,disabled:t})}}},[e._v(e._s(("0"+(e.amPmMode?i%12||12:i)).slice(-2))+e._s(e.amPm(i)))])}),0),n("el-scrollbar",{ref:"minutes",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")},mousemove:function(t){e.adjustCurrentSpinner("minutes")}}},e._l(e.minutesList,function(t,i){return n("li",{key:i,staticClass:"el-time-spinner__item",class:{active:i===e.minutes,disabled:!t},on:{click:function(t){e.handleClick("minutes",{value:i,disabled:!1})}}},[e._v(e._s(("0"+i).slice(-2)))])}),0),n("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:e.showSeconds,expression:"showSeconds"}],ref:"seconds",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")},mousemove:function(t){e.adjustCurrentSpinner("seconds")}}},e._l(60,function(t,i){return n("li",{key:i,staticClass:"el-time-spinner__item",class:{active:i===e.seconds},on:{click:function(t){e.handleClick("seconds",{value:i,disabled:!1})}}},[e._v(e._s(("0"+i).slice(-2)))])}),0)],e.arrowControl?[n("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(t){e.emitSelectRange("hours")}}},[n("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),n("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),n("ul",{ref:"hours",staticClass:"el-time-spinner__list"},e._l(e.arrowHourList,function(t,i){return n("li",{key:i,staticClass:"el-time-spinner__item",class:{active:t===e.hours,disabled:e.hoursList[t]}},[e._v(e._s(void 0===t?"":("0"+(e.amPmMode?t%12||12:t)).slice(-2)+e.amPm(t)))])}),0)]),n("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(t){e.emitSelectRange("minutes")}}},[n("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),n("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),n("ul",{ref:"minutes",staticClass:"el-time-spinner__list"},e._l(e.arrowMinuteList,function(t,i){return n("li",{key:i,staticClass:"el-time-spinner__item",class:{active:t===e.minutes}},[e._v("\n "+e._s(void 0===t?"":("0"+t).slice(-2))+"\n ")])}),0)]),e.showSeconds?n("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(t){e.emitSelectRange("seconds")}}},[n("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),n("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),n("ul",{ref:"seconds",staticClass:"el-time-spinner__list"},e._l(e.arrowSecondList,function(t,i){return n("li",{key:i,staticClass:"el-time-spinner__item",class:{active:t===e.seconds}},[e._v("\n "+e._s(void 0===t?"":("0"+t).slice(-2))+"\n ")])}),0)]):e._e()]:e._e()],2)},[],!1,null,null,null);Ki.options.__file="time-spinner.vue";var Ji=Ki.exports,Xi={mixins:[c],components:{TimeSpinner:Ji},props:{visible:Boolean,timeArrowControl:Boolean},watch:{visible:function(e){var t=this;e?(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.spinner.emitSelectRange("hours")})):this.needInitAdjust=!0},value:function(e){var t=this,n=void 0;e instanceof Date?n=Ni(e,this.selectableRange,this.format):e||(n=this.defaultValue?new Date(this.defaultValue):new Date),this.date=n,this.visible&&this.needInitAdjust&&(this.$nextTick(function(e){return t.adjustSpinners()}),this.needInitAdjust=!1)},selectableRange:function(e){this.$refs.spinner.selectableRange=e},defaultValue:function(e){ui(this.value)||(this.date=e?new Date(e):new Date)}},data:function(){return{popperClass:"",format:"HH:mm:ss",value:"",defaultValue:null,date:new Date,oldValue:new Date,selectableRange:[],selectionRange:[0,2],disabled:!1,arrowControl:!1,needInitAdjust:!0}},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},useArrow:function(){return this.arrowControl||this.timeArrowControl||!1},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},methods:{handleCancel:function(){this.$emit("pick",this.oldValue,!1)},handleChange:function(e){this.visible&&(this.date=xi(e),this.isValidValue(this.date)&&this.$emit("pick",this.date,!0))},setSelectionRange:function(e,t){this.$emit("select-range",e,t),this.selectionRange=[e,t]},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments[1];if(!t){var n=xi(Ni(this.date,this.selectableRange,this.format));this.$emit("pick",n,e,t)}},handleKeydown:function(e){var t=e.keyCode,n={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var i=n[t];return this.changeSelectionRange(i),void e.preventDefault()}if(38===t||40===t){var r=n[t];return this.$refs.spinner.scrollDown(r),void e.preventDefault()}},isValidValue:function(e){return Di(e,this.selectableRange,this.format)},adjustSpinners:function(){return this.$refs.spinner.adjustSpinners()},changeSelectionRange:function(e){var t=[0,3].concat(this.showSeconds?[6]:[]),n=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),i=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length;this.$refs.spinner.emitSelectRange(n[i])}},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)}),this.$emit("mounted")}},er=Object(r.a)(Xi,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-time-panel el-popper",class:e.popperClass},[n("div",{staticClass:"el-time-panel__content",class:{"has-seconds":e.showSeconds}},[n("time-spinner",{ref:"spinner",attrs:{"arrow-control":e.useArrow,"show-seconds":e.showSeconds,"am-pm-mode":e.amPmMode,date:e.date},on:{change:e.handleChange,"select-range":e.setSelectionRange}})],1),n("div",{staticClass:"el-time-panel__footer"},[n("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:e.handleCancel}},[e._v(e._s(e.t("el.datepicker.cancel")))]),n("button",{staticClass:"el-time-panel__btn",class:{confirm:!e.disabled},attrs:{type:"button"},on:{click:function(t){e.handleConfirm()}}},[e._v(e._s(e.t("el.datepicker.confirm")))])])])])},[],!1,null,null,null);er.options.__file="time.vue";var tr=er.exports,nr={props:{disabledDate:{},value:{},defaultValue:{validator:function(e){return null===e||e instanceof Date&&ui(e)}},date:{}},computed:{startYear:function(){return 10*Math.floor(this.date.getFullYear()/10)}},methods:{getCellStyle:function(e){var t={},n=new Date;return t.disabled="function"==typeof this.disabledDate&&function(e){var t=function(e){return e%400==0||e%100!=0&&e%4==0?366:365}(e),n=new Date(e,0,1);return yi(t).map(function(e){return mi(n,e)})}(e).every(this.disabledDate),t.current=Object(Y.b)(Object(Y.c)(this.value),function(t){return t.getFullYear()===e})>=0,t.today=n.getFullYear()===e,t.default=this.defaultValue&&this.defaultValue.getFullYear()===e,t},handleYearTableClick:function(e){var t=e.target;if("A"===t.tagName){if(Object(C.c)(t.parentNode,"disabled"))return;var n=t.textContent||t.innerText;this.$emit("pick",Number(n))}}}},ir=Object(r.a)(nr,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",{staticClass:"el-year-table",on:{click:e.handleYearTableClick}},[n("tbody",[n("tr",[n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+0)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear))])]),n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+1)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+1))])]),n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+2)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+2))])]),n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+3)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+3))])])]),n("tr",[n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+4)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+4))])]),n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+5)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+5))])]),n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+6)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+6))])]),n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+7)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+7))])])]),n("tr",[n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+8)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+8))])]),n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+9)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+9))])]),n("td"),n("td")])])])},[],!1,null,null,null);ir.options.__file="year-table.vue";var rr=ir.exports,or={props:{disabledDate:{},value:{},defaultValue:{validator:function(e){return null===e||e instanceof Date&&ui(e)}},date:{}},mixins:[c],methods:{getCellStyle:function(e){var t={},n=this.date.getFullYear(),i=new Date;return t.disabled="function"==typeof this.disabledDate&&function(e,t){var n=pi(e,t),i=new Date(e,t,1);return yi(n).map(function(e){return mi(i,e)})}(n,e).every(this.disabledDate),t.current=Object(Y.b)(Object(Y.c)(this.value),function(t){return t.getFullYear()===n&&t.getMonth()===e})>=0,t.today=i.getFullYear()===n&&i.getMonth()===e,t.default=this.defaultValue&&this.defaultValue.getFullYear()===n&&this.defaultValue.getMonth()===e,t},handleMonthTableClick:function(e){var t=e.target;if("A"===t.tagName&&!Object(C.c)(t.parentNode,"disabled")){var n=t.parentNode.cellIndex,i=4*t.parentNode.parentNode.rowIndex+n;this.$emit("pick",i)}}}},sr=Object(r.a)(or,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",{staticClass:"el-month-table",on:{click:e.handleMonthTableClick}},[n("tbody",[n("tr",[n("td",{class:e.getCellStyle(0)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jan")))])]),n("td",{class:e.getCellStyle(1)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.feb")))])]),n("td",{class:e.getCellStyle(2)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.mar")))])]),n("td",{class:e.getCellStyle(3)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.apr")))])])]),n("tr",[n("td",{class:e.getCellStyle(4)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.may")))])]),n("td",{class:e.getCellStyle(5)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jun")))])]),n("td",{class:e.getCellStyle(6)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jul")))])]),n("td",{class:e.getCellStyle(7)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.aug")))])])]),n("tr",[n("td",{class:e.getCellStyle(8)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.sep")))])]),n("td",{class:e.getCellStyle(9)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.oct")))])]),n("td",{class:e.getCellStyle(10)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.nov")))])]),n("td",{class:e.getCellStyle(11)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.dec")))])])])])])},[],!1,null,null,null);sr.options.__file="month-table.vue";var ar=sr.exports,lr=["sun","mon","tue","wed","thu","fri","sat"],ur=function(e){return"number"==typeof e||"string"==typeof e?Ci(new Date(e)).getTime():e instanceof Date?Ci(e).getTime():NaN},cr={mixins:[c],props:{firstDayOfWeek:{default:7,type:Number,validator:function(e){return e>=1&&e<=7}},value:{},defaultValue:{validator:function(e){return null===e||ui(e)||Array.isArray(e)&&e.every(ui)}},date:{},selectionMode:{default:"day"},showWeekNumber:{type:Boolean,default:!1},disabledDate:{},minDate:{},maxDate:{},rangeState:{default:function(){return{endDate:null,selecting:!1}}}},computed:{offsetDay:function(){var e=this.firstDayOfWeek;return e>3?7-e:-e},WEEKS:function(){var e=this.firstDayOfWeek;return lr.concat(lr).slice(e,e+7)},year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},startDate:function(){return e=this.year,t=this.month,n=new Date(e,t,1),i=n.getDay(),fi(n,0===i?7:i);var e,t,n,i},rows:function(){var e=this,t=new Date(this.year,this.month,1),n=function(e){var t=new Date(e.getTime());return t.setDate(1),t.getDay()}(t),i=pi(t.getFullYear(),t.getMonth()),r=pi(t.getFullYear(),0===t.getMonth()?11:t.getMonth()-1);n=0===n?7:n;for(var o=this.offsetDay,s=this.tableRows,a=1,l=void 0,u=this.startDate,c=this.disabledDate,h="dates"===this.selectionMode?Object(Y.c)(this.value):[],d=ur(new Date),p=0;p<6;p++){var f=s[p];this.showWeekNumber&&(f[0]||(f[0]={type:"week",text:gi(mi(u,7*p+1))}));for(var m=function(t){var s=f[e.showWeekNumber?t+1:t];s||(s={row:p,column:t,type:"normal",inRange:!1,start:!1,end:!1}),s.type="normal";var m=mi(u,7*p+t-o).getTime();s.inRange=m>=ur(e.minDate)&&m<=ur(e.maxDate),s.start=e.minDate&&m===ur(e.minDate),s.end=e.maxDate&&m===ur(e.maxDate),m===d&&(s.type="today"),p>=0&&p<=1?t+7*p>=n+o?(s.text=a++,2===a&&(l=7*p+t)):(s.text=r-(n+o-t%7)+1+7*p,s.type="prev-month"):a<=i?(s.text=a++,2===a&&(l=7*p+t)):(s.text=a++-i,s.type="next-month");var g=new Date(m);s.disabled="function"==typeof c&&c(g),s.selected=Object(Y.a)(h,function(e){return e.getTime()===g.getTime()}),e.$set(f,e.showWeekNumber?t+1:t,s)},g=0;g<7;g++)m(g);if("week"===this.selectionMode){var v=this.showWeekNumber?1:0,y=this.showWeekNumber?7:6,b=this.isWeekActive(f[v+1]);f[v].inRange=b,f[v].start=b,f[y].inRange=b,f[y].end=b}}return s.firstDayPosition=l,s}},watch:{"rangeState.endDate":function(e){this.markRange(this.minDate,e)},minDate:function(e,t){ur(e)!==ur(t)&&this.markRange(this.minDate,this.maxDate)},maxDate:function(e,t){ur(e)!==ur(t)&&this.markRange(this.minDate,this.maxDate)}},data:function(){return{tableRows:[[],[],[],[],[],[]],lastRow:null,lastColumn:null}},methods:{cellMatchesDate:function(e,t){var n=new Date(t);return this.year===n.getFullYear()&&this.month===n.getMonth()&&Number(e.text)===n.getDate()},getCellClasses:function(e){var t=this,n=this.selectionMode,i=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[],r=[];return"normal"!==e.type&&"today"!==e.type||e.disabled?r.push(e.type):(r.push("available"),"today"===e.type&&r.push("today")),"normal"===e.type&&i.some(function(n){return t.cellMatchesDate(e,n)})&&r.push("default"),"day"!==n||"normal"!==e.type&&"today"!==e.type||!this.cellMatchesDate(e,this.value)||r.push("current"),!e.inRange||"normal"!==e.type&&"today"!==e.type&&"week"!==this.selectionMode||(r.push("in-range"),e.start&&r.push("start-date"),e.end&&r.push("end-date")),e.disabled&&r.push("disabled"),e.selected&&r.push("selected"),r.join(" ")},getDateOfCell:function(e,t){var n=7*e+(t-(this.showWeekNumber?1:0))-this.offsetDay;return mi(this.startDate,n)},isWeekActive:function(e){if("week"!==this.selectionMode)return!1;var t=new Date(this.year,this.month,1),n=t.getFullYear(),i=t.getMonth();if("prev-month"===e.type&&(t.setMonth(0===i?11:i-1),t.setFullYear(0===i?n-1:n)),"next-month"===e.type&&(t.setMonth(11===i?0:i+1),t.setFullYear(11===i?n+1:n)),t.setDate(parseInt(e.text,10)),ui(this.value)){var r=(this.value.getDay()-this.firstDayOfWeek+7)%7-1;return fi(this.value,r).getTime()===t.getTime()}return!1},markRange:function(e,t){e=ur(e),t=ur(t)||e;var n=[Math.min(e,t),Math.max(e,t)];e=n[0],t=n[1];for(var i=this.startDate,r=this.rows,o=0,s=r.length;o=e&&d<=t,c.start=e&&d===e,c.end=t&&d===t}},handleMouseMove:function(e){if(this.rangeState.selecting){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var n=t.parentNode.rowIndex-1,i=t.cellIndex;this.rows[n][i].disabled||n===this.lastRow&&i===this.lastColumn||(this.lastRow=n,this.lastColumn=i,this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:{selecting:!0,endDate:this.getDateOfCell(n,i)}}))}}},handleClick:function(e){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var n=t.parentNode.rowIndex-1,i="week"===this.selectionMode?1:t.cellIndex,r=this.rows[n][i];if(!r.disabled&&"week"!==r.type){var o,s,a,l=this.getDateOfCell(n,i);if("range"===this.selectionMode)this.rangeState.selecting?(l>=this.minDate?this.$emit("pick",{minDate:this.minDate,maxDate:l}):this.$emit("pick",{minDate:l,maxDate:this.minDate}),this.rangeState.selecting=!1):(this.$emit("pick",{minDate:l,maxDate:null}),this.rangeState.selecting=!0);else if("day"===this.selectionMode)this.$emit("pick",l);else if("week"===this.selectionMode){var u=gi(l),c=l.getFullYear()+"w"+u;this.$emit("pick",{year:l.getFullYear(),week:u,value:c,date:l})}else if("dates"===this.selectionMode){var h=this.value||[],d=r.selected?(o=h,(a="function"==typeof(s=function(e){return e.getTime()===l.getTime()})?Object(Y.b)(o,s):o.indexOf(s))>=0?[].concat(o.slice(0,a),o.slice(a+1)):o):[].concat(h,[l]);this.$emit("pick",d)}}}}}},hr=Object(r.a)(cr,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",{staticClass:"el-date-table",class:{"is-week-mode":"week"===e.selectionMode},attrs:{cellspacing:"0",cellpadding:"0"},on:{click:e.handleClick,mousemove:e.handleMouseMove}},[n("tbody",[n("tr",[e.showWeekNumber?n("th",[e._v(e._s(e.t("el.datepicker.week")))]):e._e(),e._l(e.WEEKS,function(t,i){return n("th",{key:i},[e._v(e._s(e.t("el.datepicker.weeks."+t)))])})],2),e._l(e.rows,function(t,i){return n("tr",{key:i,staticClass:"el-date-table__row",class:{current:e.isWeekActive(t[1])}},e._l(t,function(t,i){return n("td",{key:i,class:e.getCellClasses(t)},[n("div",[n("span",[e._v("\n "+e._s(t.text)+"\n ")])])])}),0)})],2)])},[],!1,null,null,null);hr.options.__file="date-table.vue";var dr=hr.exports,pr={mixins:[c],directives:{Clickoutside:pe},watch:{showTime:function(e){var t=this;e&&this.$nextTick(function(e){var n=t.$refs.input.$el;n&&(t.pickerWidth=n.getBoundingClientRect().width+10)})},value:function(e){"dates"===this.selectionMode&&this.value||(ui(e)?this.date=new Date(e):this.date=this.getDefaultValue())},defaultValue:function(e){ui(this.value)||(this.date=e?new Date(e):new Date)},timePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.timepicker.adjustSpinners()})},selectionMode:function(e){"month"===e?"year"===this.currentView&&"month"===this.currentView||(this.currentView="month"):"dates"===e&&(this.currentView="date")}},methods:{proxyTimePickerDataProperties:function(){var e,t=this,n=function(e){t.$refs.timepicker.value=e},i=function(e){t.$refs.timepicker.date=e},r=function(e){t.$refs.timepicker.selectableRange=e};this.$watch("value",n),this.$watch("date",i),this.$watch("selectableRange",r),e=this.timeFormat,t.$refs.timepicker.format=e,n(this.value),i(this.date),r(this.selectableRange)},handleClear:function(){this.date=this.getDefaultValue(),this.$emit("pick",null)},emit:function(e){for(var t=this,n=arguments.length,i=Array(n>1?n-1:0),r=1;r0)||Di(e,this.selectableRange,this.format||"HH:mm:ss")}},components:{TimePicker:tr,YearTable:rr,MonthTable:ar,DateTable:dr,ElInput:M,ElButton:ze},data:function(){return{popperClass:"",date:new Date,value:"",defaultValue:null,defaultTime:null,showTime:!1,selectionMode:"day",shortcuts:"",visible:!1,currentView:"date",disabledDate:"",selectableRange:[],firstDayOfWeek:7,showWeekNumber:!1,timePickerVisible:!1,format:"",arrowControl:!1,userInputDate:null,userInputTime:null}},computed:{year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},week:function(){return gi(this.date)},monthDate:function(){return this.date.getDate()},footerVisible:function(){return this.showTime||"dates"===this.selectionMode},visibleTime:function(){return null!==this.userInputTime?this.userInputTime:hi(this.value||this.defaultValue,this.timeFormat)},visibleDate:function(){return null!==this.userInputDate?this.userInputDate:hi(this.value||this.defaultValue,this.dateFormat)},yearLabel:function(){var e=this.t("el.datepicker.year");if("year"===this.currentView){var t=10*Math.floor(this.year/10);return e?t+" "+e+" - "+(t+9)+" "+e:t+" - "+(t+9)}return this.year+" "+e},timeFormat:function(){return this.format?Li(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?Si(this.format):"yyyy-MM-dd"}}},fr=Object(r.a)(pr,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-enter":e.handleEnter,"after-leave":e.handleLeave}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-picker el-popper",class:[{"has-sidebar":e.$slots.sidebar||e.shortcuts,"has-time":e.showTime},e.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[e._t("sidebar"),e.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},e._l(e.shortcuts,function(t,i){return n("button",{key:i,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(n){e.handleShortcutClick(t)}}},[e._v(e._s(t.text))])}),0):e._e(),n("div",{staticClass:"el-picker-panel__body"},[e.showTime?n("div",{staticClass:"el-date-picker__time-header"},[n("span",{staticClass:"el-date-picker__editor-wrap"},[n("el-input",{attrs:{placeholder:e.t("el.datepicker.selectDate"),value:e.visibleDate,size:"small"},on:{input:function(t){return e.userInputDate=t},change:e.handleVisibleDateChange}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleTimePickClose,expression:"handleTimePickClose"}],staticClass:"el-date-picker__editor-wrap"},[n("el-input",{ref:"input",attrs:{placeholder:e.t("el.datepicker.selectTime"),value:e.visibleTime,size:"small"},on:{focus:function(t){e.timePickerVisible=!0},input:function(t){return e.userInputTime=t},change:e.handleVisibleTimeChange}}),n("time-picker",{ref:"timepicker",attrs:{"time-arrow-control":e.arrowControl,visible:e.timePickerVisible},on:{pick:e.handleTimePick,mounted:e.proxyTimePickerDataProperties}})],1)]):e._e(),n("div",{directives:[{name:"show",rawName:"v-show",value:"time"!==e.currentView,expression:"currentView !== 'time'"}],staticClass:"el-date-picker__header",class:{"el-date-picker__header--bordered":"year"===e.currentView||"month"===e.currentView}},[n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",attrs:{type:"button","aria-label":e.t("el.datepicker.prevYear")},on:{click:e.prevYear}}),n("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","aria-label":e.t("el.datepicker.prevMonth")},on:{click:e.prevMonth}}),n("span",{staticClass:"el-date-picker__header-label",attrs:{role:"button"},on:{click:e.showYearPicker}},[e._v(e._s(e.yearLabel))]),n("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},attrs:{role:"button"},on:{click:e.showMonthPicker}},[e._v(e._s(e.t("el.datepicker.month"+(e.month+1))))]),n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",attrs:{type:"button","aria-label":e.t("el.datepicker.nextYear")},on:{click:e.nextYear}}),n("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","aria-label":e.t("el.datepicker.nextMonth")},on:{click:e.nextMonth}})]),n("div",{staticClass:"el-picker-panel__content"},[n("date-table",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],attrs:{"selection-mode":e.selectionMode,"first-day-of-week":e.firstDayOfWeek,value:e.value,"default-value":e.defaultValue?new Date(e.defaultValue):null,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleDatePick}}),n("year-table",{directives:[{name:"show",rawName:"v-show",value:"year"===e.currentView,expression:"currentView === 'year'"}],attrs:{value:e.value,"default-value":e.defaultValue?new Date(e.defaultValue):null,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleYearPick}}),n("month-table",{directives:[{name:"show",rawName:"v-show",value:"month"===e.currentView,expression:"currentView === 'month'"}],attrs:{value:e.value,"default-value":e.defaultValue?new Date(e.defaultValue):null,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleMonthPick}})],1)])],2),n("div",{directives:[{name:"show",rawName:"v-show",value:e.footerVisible&&"date"===e.currentView,expression:"footerVisible && currentView === 'date'"}],staticClass:"el-picker-panel__footer"},[n("el-button",{directives:[{name:"show",rawName:"v-show",value:"dates"!==e.selectionMode,expression:"selectionMode !== 'dates'"}],staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:e.changeToNow}},[e._v("\n "+e._s(e.t("el.datepicker.now"))+"\n ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini"},on:{click:e.confirm}},[e._v("\n "+e._s(e.t("el.datepicker.confirm"))+"\n ")])],1)])])},[],!1,null,null,null);fr.options.__file="date.vue";var mr=fr.exports,gr=function(e,t){return new Date(new Date(e).getTime()+t)},vr=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),gr(e,864e5)]:[new Date,gr(Date.now(),864e5)]},yr={mixins:[c],directives:{Clickoutside:pe},computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting&&this.isValidValue([this.minDate,this.maxDate]))},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.leftDate.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.leftDate.getFullYear()},leftMonth:function(){return this.leftDate.getMonth()},leftMonthDate:function(){return this.leftDate.getDate()},rightYear:function(){return this.rightDate.getFullYear()},rightMonth:function(){return this.rightDate.getMonth()},rightMonthDate:function(){return this.rightDate.getDate()},minVisibleDate:function(){return null!==this.dateUserInput.min?this.dateUserInput.min:this.minDate?hi(this.minDate,this.dateFormat):""},maxVisibleDate:function(){return null!==this.dateUserInput.max?this.dateUserInput.max:this.maxDate||this.minDate?hi(this.maxDate||this.minDate,this.dateFormat):""},minVisibleTime:function(){return null!==this.timeUserInput.min?this.timeUserInput.min:this.minDate?hi(this.minDate,this.timeFormat):""},maxVisibleTime:function(){return null!==this.timeUserInput.max?this.timeUserInput.max:this.maxDate||this.minDate?hi(this.maxDate||this.minDate,this.timeFormat):""},timeFormat:function(){return this.format?Li(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?Si(this.format):"yyyy-MM-dd"},enableMonthArrow:function(){var e=(this.leftMonth+1)%12,t=this.leftMonth+1>=12?1:0;return this.unlinkPanels&&new Date(this.leftYear+t,e)=12}},data:function(){return{popperClass:"",value:[],defaultValue:null,defaultTime:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:ki(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},showTime:!1,shortcuts:"",visible:"",disabledDate:"",firstDayOfWeek:7,minTimePickerVisible:!1,maxTimePickerVisible:!1,format:"",arrowControl:!1,unlinkPanels:!1,dateUserInput:{min:null,max:null},timeUserInput:{min:null,max:null}}},watch:{minDate:function(e){var t=this;this.dateUserInput.min=null,this.timeUserInput.min=null,this.$nextTick(function(){if(t.$refs.maxTimePicker&&t.maxDate&&t.maxDatethis.maxDate&&(this.maxDate=this.minDate)):(this.maxDate=bi(this.maxDate,n.getFullYear(),n.getMonth(),n.getDate()),this.maxDatethis.maxDate&&(this.maxDate=this.minDate),this.$refs.minTimePicker.value=this.minDate,this.minTimePickerVisible=!1):(this.maxDate=Mi(this.maxDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.maxDate1&&void 0!==arguments[1])||arguments[1],i=this.defaultTime||[],r=wi(e.minDate,i[0]),o=wi(e.maxDate,i[1]);this.maxDate===o&&this.minDate===r||(this.onPick&&this.onPick(e),this.maxDate=o,this.minDate=r,setTimeout(function(){t.maxDate=o,t.minDate=r},10),n&&!this.showTime&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleMinTimePick:function(e,t,n){this.minDate=this.minDate||new Date,e&&(this.minDate=Mi(this.minDate,e.getHours(),e.getMinutes(),e.getSeconds())),n||(this.minTimePickerVisible=t),(!this.maxDate||this.maxDate&&this.maxDate.getTime()this.maxDate.getTime()&&(this.minDate=new Date(this.maxDate))},handleMaxTimeClose:function(){this.maxTimePickerVisible=!1},leftPrevYear:function(){this.leftDate=ji(this.leftDate),this.unlinkPanels||(this.rightDate=ki(this.leftDate))},leftPrevMonth:function(){this.leftDate=Ii(this.leftDate),this.unlinkPanels||(this.rightDate=ki(this.leftDate))},rightNextYear:function(){this.unlinkPanels?this.rightDate=Ti(this.rightDate):(this.leftDate=Ti(this.leftDate),this.rightDate=ki(this.leftDate))},rightNextMonth:function(){this.unlinkPanels?this.rightDate=ki(this.rightDate):(this.leftDate=ki(this.leftDate),this.rightDate=ki(this.leftDate))},leftNextYear:function(){this.leftDate=Ti(this.leftDate)},leftNextMonth:function(){this.leftDate=ki(this.leftDate)},rightPrevYear:function(){this.rightDate=ji(this.rightDate)},rightPrevMonth:function(){this.rightDate=Ii(this.rightDate)},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.isValidValue([this.minDate,this.maxDate])&&this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&ui(e[0])&&ui(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))},resetView:function(){this.minDate=this.value&&ui(this.value[0])?new Date(this.value[0]):null,this.maxDate=this.value&&ui(this.value[0])?new Date(this.value[1]):null}},components:{TimePicker:tr,DateTable:dr,ElInput:M,ElButton:ze}},br=Object(r.a)(yr,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":e.$slots.sidebar||e.shortcuts,"has-time":e.showTime},e.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[e._t("sidebar"),e.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},e._l(e.shortcuts,function(t,i){return n("button",{key:i,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(n){e.handleShortcutClick(t)}}},[e._v(e._s(t.text))])}),0):e._e(),n("div",{staticClass:"el-picker-panel__body"},[e.showTime?n("div",{staticClass:"el-date-range-picker__time-header"},[n("span",{staticClass:"el-date-range-picker__editors-wrap"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{ref:"minInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:e.rangeState.selecting,placeholder:e.t("el.datepicker.startDate"),value:e.minVisibleDate},on:{input:function(t){return e.handleDateInput(t,"min")},change:function(t){return e.handleDateChange(t,"min")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleMinTimeClose,expression:"handleMinTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:e.rangeState.selecting,placeholder:e.t("el.datepicker.startTime"),value:e.minVisibleTime},on:{focus:function(t){e.minTimePickerVisible=!0},input:function(t){return e.handleTimeInput(t,"min")},change:function(t){return e.handleTimeChange(t,"min")}}}),n("time-picker",{ref:"minTimePicker",attrs:{"time-arrow-control":e.arrowControl,visible:e.minTimePickerVisible},on:{pick:e.handleMinTimePick,mounted:function(t){e.$refs.minTimePicker.format=e.timeFormat}}})],1)]),n("span",{staticClass:"el-icon-arrow-right"}),n("span",{staticClass:"el-date-range-picker__editors-wrap is-right"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:e.rangeState.selecting,placeholder:e.t("el.datepicker.endDate"),value:e.maxVisibleDate,readonly:!e.minDate},on:{input:function(t){return e.handleDateInput(t,"max")},change:function(t){return e.handleDateChange(t,"max")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleMaxTimeClose,expression:"handleMaxTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:e.rangeState.selecting,placeholder:e.t("el.datepicker.endTime"),value:e.maxVisibleTime,readonly:!e.minDate},on:{focus:function(t){e.minDate&&(e.maxTimePickerVisible=!0)},input:function(t){return e.handleTimeInput(t,"max")},change:function(t){return e.handleTimeChange(t,"max")}}}),n("time-picker",{ref:"maxTimePicker",attrs:{"time-arrow-control":e.arrowControl,visible:e.maxTimePickerVisible},on:{pick:e.handleMaxTimePick,mounted:function(t){e.$refs.maxTimePicker.format=e.timeFormat}}})],1)])]):e._e(),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[n("div",{staticClass:"el-date-range-picker__header"},[n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:e.leftPrevYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:e.leftPrevMonth}}),e.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{"is-disabled":!e.enableYearArrow},attrs:{type:"button",disabled:!e.enableYearArrow},on:{click:e.leftNextYear}}):e._e(),e.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",class:{"is-disabled":!e.enableMonthArrow},attrs:{type:"button",disabled:!e.enableMonthArrow},on:{click:e.leftNextMonth}}):e._e(),n("div",[e._v(e._s(e.leftLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:e.leftDate,"default-value":e.defaultValue,"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),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[n("div",{staticClass:"el-date-range-picker__header"},[e.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{"is-disabled":!e.enableYearArrow},attrs:{type:"button",disabled:!e.enableYearArrow},on:{click:e.rightPrevYear}}):e._e(),e.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",class:{"is-disabled":!e.enableMonthArrow},attrs:{type:"button",disabled:!e.enableMonthArrow},on:{click:e.rightPrevMonth}}):e._e(),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:e.rightNextYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:e.rightNextMonth}}),n("div",[e._v(e._s(e.rightLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:e.rightDate,"default-value":e.defaultValue,"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?n("div",{staticClass:"el-picker-panel__footer"},[n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:e.handleClear}},[e._v("\n "+e._s(e.t("el.datepicker.clear"))+"\n ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini",disabled:e.btnDisabled},on:{click:function(t){e.handleConfirm(!1)}}},[e._v("\n "+e._s(e.t("el.datepicker.confirm"))+"\n ")])],1):e._e()])])},[],!1,null,null,null);br.options.__file="date-range.vue";var Mr=br.exports,wr=function(e){return"daterange"===e||"datetimerange"===e?Mr:mr},Cr={mixins:[qi],name:"ElDatePicker",props:{type:{type:String,default:"date"},timeArrowControl:Boolean},watch:{type:function(e){this.picker?(this.unmountPicker(),this.panel=wr(e),this.mountPicker()):this.panel=wr(e)}},created:function(){this.panel=wr(this.type)},install:function(e){e.component(Cr.name,Cr)}},xr=Cr,Nr=function(e){var t=(e||"").split(":");return t.length>=2?{hours:parseInt(t[0],10),minutes:parseInt(t[1],10)}:null},Dr=function(e,t){var n=Nr(e),i=Nr(t),r=n.minutes+60*n.hours,o=i.minutes+60*i.hours;return r===o?0:r>o?1:-1},_r=function(e,t){var n=Nr(e),i=Nr(t),r={hours:n.hours,minutes:n.minutes};return r.minutes+=i.minutes,r.hours+=i.hours,r.hours+=Math.floor(r.minutes/60),r.minutes=r.minutes%60,function(e){return(e.hours<10?"0"+e.hours:e.hours)+":"+(e.minutes<10?"0"+e.minutes:e.minutes)}(r)},Ir={components:{ElScrollbar:oe},watch:{value:function(e){var t=this;e&&this.$nextTick(function(){return t.scrollToOption()})}},methods:{handleClick:function(e){e.disabled||this.$emit("pick",e.value)},handleClear:function(){this.$emit("pick",null)},scrollToOption:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".selected",t=this.$refs.popper.querySelector(".el-picker-panel__content");fe(t,t.querySelector(e))},handleMenuEnter:function(){var e=this,t=-1!==this.items.map(function(e){return e.value}).indexOf(this.value),n=-1!==this.items.map(function(e){return e.value}).indexOf(this.defaultValue),i=(t?".selected":n&&".default")||".time-select-item:not(.disabled)";this.$nextTick(function(){return e.scrollToOption(i)})},scrollDown:function(e){for(var t=this.items,n=t.length,i=t.length,r=t.map(function(e){return e.value}).indexOf(this.value);i--;)if(!t[r=(r+e+n)%n].disabled)return void this.$emit("pick",t[r].value,!0)},isValidValue:function(e){return-1!==this.items.filter(function(e){return!e.disabled}).map(function(e){return e.value}).indexOf(e)},handleKeydown:function(e){var t=e.keyCode;if(38===t||40===t){var n={40:1,38:-1}[t.toString()];return this.scrollDown(n),void e.stopPropagation()}}},data:function(){return{popperClass:"",start:"09:00",end:"18:00",step:"00:30",value:"",defaultValue:"",visible:!1,minTime:"",maxTime:"",width:0}},computed:{items:function(){var e=this.start,t=this.end,n=this.step,i=[];if(e&&t&&n)for(var r=e;Dr(r,t)<=0;)i.push({value:r,disabled:Dr(r,this.minTime||"-1:-1")<=0||Dr(r,this.maxTime||"100:100")>=0}),r=_r(r,n);return i}}},kr=Object(r.a)(Ir,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":e.handleMenuEnter,"after-leave":function(t){e.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],ref:"popper",staticClass:"el-picker-panel time-select el-popper",class:e.popperClass,style:{width:e.width+"px"}},[n("el-scrollbar",{attrs:{noresize:"","wrap-class":"el-picker-panel__content"}},e._l(e.items,function(t){return n("div",{key:t.value,staticClass:"time-select-item",class:{selected:e.value===t.value,disabled:t.disabled,default:t.value===e.defaultValue},attrs:{disabled:t.disabled},on:{click:function(n){e.handleClick(t)}}},[e._v(e._s(t.value))])}),0)],1)])},[],!1,null,null,null);kr.options.__file="time-select.vue";var jr=kr.exports,Tr={mixins:[qi],name:"ElTimeSelect",componentName:"ElTimeSelect",props:{type:{type:String,default:"time-select"}},beforeCreate:function(){this.panel=jr},install:function(e){e.component(Tr.name,Tr)}},Sr=Tr,Lr=di("00:00:00","HH:mm:ss"),Or=di("23:59:59","HH:mm:ss"),Ar=function(e){return bi(Or,e.getFullYear(),e.getMonth(),e.getDate())},Er=function(e,t){return new Date(Math.min(e.getTime()+t,Ar(e).getTime()))},zr={mixins:[c],components:{TimeSpinner:Ji},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},offset:function(){return this.showSeconds?11:8},spinner:function(){return this.selectionRange[0]this.maxDate.getTime()},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},data:function(){return{popperClass:"",minDate:new Date,maxDate:new Date,value:[],oldValue:[new Date,new Date],defaultValue:null,format:"HH:mm:ss",visible:!1,selectionRange:[0,2],arrowControl:!1}},watch:{value:function(e){Array.isArray(e)?(this.minDate=new Date(e[0]),this.maxDate=new Date(e[1])):Array.isArray(this.defaultValue)?(this.minDate=new Date(this.defaultValue[0]),this.maxDate=new Date(this.defaultValue[1])):this.defaultValue?(this.minDate=new Date(this.defaultValue),this.maxDate=Er(new Date(this.defaultValue),36e5)):(this.minDate=new Date,this.maxDate=Er(new Date,36e5))},visible:function(e){var t=this;e&&(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.minSpinner.emitSelectRange("hours")}))}},methods:{handleClear:function(){this.$emit("pick",null)},handleCancel:function(){this.$emit("pick",this.oldValue)},handleMinChange:function(e){this.minDate=xi(e),this.handleChange()},handleMaxChange:function(e){this.maxDate=xi(e),this.handleChange()},handleChange:function(){var e;this.isValidValue([this.minDate,this.maxDate])&&(this.$refs.minSpinner.selectableRange=[[(e=this.minDate,bi(Lr,e.getFullYear(),e.getMonth(),e.getDate())),this.maxDate]],this.$refs.maxSpinner.selectableRange=[[this.minDate,Ar(this.maxDate)]],this.$emit("pick",[this.minDate,this.maxDate],!0))},setMinSelectionRange:function(e,t){this.$emit("select-range",e,t,"min"),this.selectionRange=[e,t]},setMaxSelectionRange:function(e,t){this.$emit("select-range",e,t,"max"),this.selectionRange=[e+this.offset,t+this.offset]},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=this.$refs.minSpinner.selectableRange,n=this.$refs.maxSpinner.selectableRange;this.minDate=Ni(this.minDate,t,this.format),this.maxDate=Ni(this.maxDate,n,this.format),this.$emit("pick",[this.minDate,this.maxDate],e)},adjustSpinners:function(){this.$refs.minSpinner.adjustSpinners(),this.$refs.maxSpinner.adjustSpinners()},changeSelectionRange:function(e){var t=this.showSeconds?[0,3,6,11,14,17]:[0,3,8,11],n=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),i=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length,r=t.length/2;i-1}},openDelay:{type:Number,default:0},title:String,disabled:Boolean,content:String,reference:{},popperClass:String,width:{},visibleArrow:{default:!0},arrowOffset:{type:Number,default:0},transition:{type:String,default:"fade-in-linear"}},computed:{tooltipId:function(){return"el-popover-"+Object(Y.e)()}},watch:{showPopper:function(e){this.disabled||(e?this.$emit("show"):this.$emit("hide"))}},mounted:function(){var e=this,t=this.referenceElm=this.reference||this.$refs.reference,n=this.popper||this.$refs.popper;!t&&this.$slots.reference&&this.$slots.reference[0]&&(t=this.referenceElm=this.$slots.reference[0].elm),t&&(Object(C.a)(t,"el-popover__reference"),t.setAttribute("aria-describedby",this.tooltipId),t.setAttribute("tabindex",0),n.setAttribute("tabindex",0),"click"!==this.trigger&&(Object(C.e)(t,"focusin",function(){e.handleFocus();var n=t.__vue__;n&&"function"==typeof n.focus&&n.focus()}),Object(C.e)(n,"focusin",this.handleFocus),Object(C.e)(t,"focusout",this.handleBlur),Object(C.e)(n,"focusout",this.handleBlur)),Object(C.e)(t,"keydown",this.handleKeydown),Object(C.e)(t,"click",this.handleClick)),"click"===this.trigger?(Object(C.e)(t,"click",this.doToggle),Object(C.e)(document,"click",this.handleDocumentClick)):"hover"===this.trigger?(Object(C.e)(t,"mouseenter",this.handleMouseEnter),Object(C.e)(n,"mouseenter",this.handleMouseEnter),Object(C.e)(t,"mouseleave",this.handleMouseLeave),Object(C.e)(n,"mouseleave",this.handleMouseLeave)):"focus"===this.trigger&&(t.querySelector("input, textarea")?(Object(C.e)(t,"focusin",this.doShow),Object(C.e)(t,"focusout",this.doClose)):(Object(C.e)(t,"mousedown",this.doShow),Object(C.e)(t,"mouseup",this.doClose)))},beforeDestroy:function(){this.cleanup()},deactivated:function(){this.cleanup()},methods:{doToggle:function(){this.showPopper=!this.showPopper},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},handleFocus:function(){Object(C.a)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!0)},handleClick:function(){Object(C.g)(this.referenceElm,"focusing")},handleBlur:function(){Object(C.g)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!1)},handleMouseEnter:function(){var e=this;clearTimeout(this._timer),this.openDelay?this._timer=setTimeout(function(){e.showPopper=!0},this.openDelay):this.showPopper=!0},handleKeydown:function(e){27===e.keyCode&&"manual"!==this.trigger&&this.doClose()},handleMouseLeave:function(){var e=this;clearTimeout(this._timer),this._timer=setTimeout(function(){e.showPopper=!1},200)},handleDocumentClick:function(e){var t=this.reference||this.$refs.reference,n=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)&&n&&!n.contains(e.target)&&(this.showPopper=!1)},handleAfterEnter:function(){this.$emit("after-enter")},handleAfterLeave:function(){this.$emit("after-leave"),this.doDestroy()},cleanup:function(){this.openDelay&&clearTimeout(this._timer)}},destroyed:function(){var e=this.reference;Object(C.d)(e,"click",this.doToggle),Object(C.d)(e,"mouseup",this.doClose),Object(C.d)(e,"mousedown",this.doShow),Object(C.d)(e,"focusin",this.doShow),Object(C.d)(e,"focusout",this.doClose),Object(C.d)(e,"mousedown",this.doShow),Object(C.d)(e,"mouseup",this.doClose),Object(C.d)(e,"mouseleave",this.handleMouseLeave),Object(C.d)(e,"mouseenter",this.handleMouseEnter),Object(C.d)(document,"click",this.handleDocumentClick)}},Rr=Object(r.a)(Yr,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("span",[n("transition",{attrs:{name:e.transition},on:{"after-enter":e.handleAfterEnter,"after-leave":e.handleAfterLeave}},[n("div",{directives:[{name:"show",rawName:"v-show",value:!e.disabled&&e.showPopper,expression:"!disabled && showPopper"}],ref:"popper",staticClass:"el-popover el-popper",class:[e.popperClass,e.content&&"el-popover--plain"],style:{width:e.width+"px"},attrs:{role:"tooltip",id:e.tooltipId,"aria-hidden":e.disabled||!e.showPopper?"true":"false"}},[e.title?n("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)},[],!1,null,null,null);Rr.options.__file="main.vue";var Br=Rr.exports,Qr=function(e,t,n){var i=t.expression?t.value:t.arg,r=n.context.$refs[i];r&&(Array.isArray(r)?r[0].$refs.reference=e:r.$refs.reference=e)},Vr={bind:function(e,t,n){Qr(e,t,n)},inserted:function(e,t,n){Qr(e,t,n)}};w.a.directive("popover",Vr),Br.install=function(e){e.directive("popover",Vr),e.component(Br.name,Br)},Br.directive=Vr;var Hr,Wr=Br,Gr="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},qr=qr||{};qr.Dialog=function(e,t,n){var i=this;if(this.dialogNode=e,null===this.dialogNode||"dialog"!==this.dialogNode.getAttribute("role"))throw new Error("Dialog() requires a DOM element with ARIA role of dialog.");"string"==typeof t?this.focusAfterClosed=document.getElementById(t):"object"===(void 0===t?"undefined":Gr(t))?this.focusAfterClosed=t:this.focusAfterClosed=null,"string"==typeof n?this.focusFirst=document.getElementById(n):"object"===(void 0===n?"undefined":Gr(n))?this.focusFirst=n:this.focusFirst=null,this.focusFirst?this.focusFirst.focus():et.focusFirstDescendant(this.dialogNode),this.lastFocus=document.activeElement,Hr=function(e){i.trapFocus(e)},this.addListeners()},qr.Dialog.prototype.addListeners=function(){document.addEventListener("focus",Hr,!0)},qr.Dialog.prototype.removeListeners=function(){document.removeEventListener("focus",Hr,!0)},qr.Dialog.prototype.closeDialog=function(){var e=this;this.removeListeners(),this.focusAfterClosed&&setTimeout(function(){e.focusAfterClosed.focus()})},qr.Dialog.prototype.trapFocus=function(e){et.IgnoreUtilFocusChanges||(this.dialogNode.contains(e.target)?this.lastFocus=e.target:(et.focusFirstDescendant(this.dialogNode),this.lastFocus===document.activeElement&&et.focusLastDescendant(this.dialogNode),this.lastFocus=document.activeElement))};var Zr=qr.Dialog,Kr=void 0,Jr={success:"success",info:"info",warning:"warning",error:"error"},Xr={mixins:[A,c],props:{modal:{default:!0},lockScroll:{default:!0},showClose:{type:Boolean,default:!0},closeOnClickModal:{default:!0},closeOnPressEscape:{default:!0},closeOnHashChange:{default:!0},center:{default:!1,type:Boolean},roundButton:{default:!1,type:Boolean}},components:{ElInput:M,ElButton:ze},computed:{icon:function(){var e=this.type;return this.iconClass||(e&&Jr[e]?"el-icon-"+Jr[e]:"")},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.visible&&(this.visible=!1,this._closing=!0,this.onClose&&this.onClose(),Kr.closeDialog(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose(),setTimeout(function(){e.action&&e.callback(e.action,e)}))},handleWrapperClick:function(){this.closeOnClickModal&&this.handleAction(this.distinguishCancelAndClose?"close":"cancel")},handleInputEnter:function(){if("textarea"!==this.inputType)return this.handleAction("confirm")},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||Object(u.b)("el.messagebox.error"),Object(C.a)(this.getInputElement(),"invalid"),!1;var t=this.inputValidator;if("function"==typeof t){var n=t(this.inputValue);if(!1===n)return this.editorErrorMessage=this.inputErrorMessage||Object(u.b)("el.messagebox.error"),Object(C.a)(this.getInputElement(),"invalid"),!1;if("string"==typeof n)return this.editorErrorMessage=n,Object(C.a)(this.getInputElement(),"invalid"),!1}}return this.editorErrorMessage="",Object(C.g)(this.getInputElement(),"invalid"),!0},getFirstFocus:function(){var e=this.$el.querySelector(".el-message-box__btns .el-button"),t=this.$el.querySelector(".el-message-box__btns .el-message-box__title");return e||t},getInputElement:function(){var e=this.$refs.input.$refs;return e.input||e.textarea}},watch:{inputValue:{immediate:!0,handler:function(e){var t=this;this.$nextTick(function(n){"prompt"===t.$type&&null!==e&&t.validate()})}},visible:function(e){var t=this;e&&(this.uid++,"alert"!==this.$type&&"confirm"!==this.$type||this.$nextTick(function(){t.$refs.confirm.$el.focus()}),this.focusAfterClosed=document.activeElement,Kr=new Zr(this.$el,this.focusAfterClosed,this.getFirstFocus())),"prompt"===this.$type&&(e?setTimeout(function(){t.$refs.input&&t.$refs.input.$el&&t.getInputElement().focus()},500):(this.editorErrorMessage="",Object(C.g)(this.getInputElement(),"invalid")))}},mounted:function(){var e=this;this.$nextTick(function(){e.closeOnHashChange&&window.addEventListener("hashchange",e.close)})},beforeDestroy:function(){this.closeOnHashChange&&window.removeEventListener("hashchange",this.close),setTimeout(function(){Kr.closeDialog()})},data:function(){return{uid:1,title:void 0,message:"",type:"",iconClass:"",customClass:"",showInput:!1,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,action:"",confirmButtonText:"",cancelButtonText:"",confirmButtonLoading:!1,cancelButtonLoading:!1,confirmButtonClass:"",confirmButtonDisabled:!1,cancelButtonClass:"",editorErrorMessage:null,callback:null,dangerouslyUseHTMLString:!1,focusAfterClosed:null,isOnComposition:!1,distinguishCancelAndClose:!1}}},eo=Object(r.a)(Xr,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"msgbox-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-message-box__wrapper",attrs:{tabindex:"-1",role:"dialog","aria-modal":"true","aria-label":e.title||"dialog"},on:{click:function(t){return t.target!==t.currentTarget?null:e.handleWrapperClick(t)}}},[n("div",{staticClass:"el-message-box",class:[e.customClass,e.center&&"el-message-box--center"]},[null!==e.title?n("div",{staticClass:"el-message-box__header"},[n("div",{staticClass:"el-message-box__title"},[e.icon&&e.center?n("div",{class:["el-message-box__status",e.icon]}):e._e(),n("span",[e._v(e._s(e.title))])]),e.showClose?n("button",{staticClass:"el-message-box__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:function(t){e.handleAction(e.distinguishCancelAndClose?"close":"cancel")},keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key,"Enter"))return null;e.handleAction(e.distinguishCancelAndClose?"close":"cancel")}}},[n("i",{staticClass:"el-message-box__close el-icon-close"})]):e._e()]):e._e(),n("div",{staticClass:"el-message-box__content"},[e.icon&&!e.center&&""!==e.message?n("div",{class:["el-message-box__status",e.icon]}):e._e(),""!==e.message?n("div",{staticClass:"el-message-box__message"},[e._t("default",[e.dangerouslyUseHTMLString?n("p",{domProps:{innerHTML:e._s(e.message)}}):n("p",[e._v(e._s(e.message))])])],2):e._e(),n("div",{directives:[{name:"show",rawName:"v-show",value:e.showInput,expression:"showInput"}],staticClass:"el-message-box__input"},[n("el-input",{ref:"input",attrs:{type:e.inputType,placeholder:e.inputPlaceholder},nativeOn:{keydown:function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?e.handleInputEnter(t):null}},model:{value:e.inputValue,callback:function(t){e.inputValue=t},expression:"inputValue"}}),n("div",{staticClass:"el-message-box__errormsg",style:{visibility:e.editorErrorMessage?"visible":"hidden"}},[e._v(e._s(e.editorErrorMessage))])],1)]),n("div",{staticClass:"el-message-box__btns"},[e.showCancelButton?n("el-button",{class:[e.cancelButtonClasses],attrs:{loading:e.cancelButtonLoading,round:e.roundButton,size:"small"},on:{keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key,"Enter"))return null;e.handleAction("cancel")}},nativeOn:{click:function(t){e.handleAction("cancel")}}},[e._v("\n "+e._s(e.cancelButtonText||e.t("el.messagebox.cancel"))+"\n ")]):e._e(),n("el-button",{directives:[{name:"show",rawName:"v-show",value:e.showConfirmButton,expression:"showConfirmButton"}],ref:"confirm",class:[e.confirmButtonClasses],attrs:{loading:e.confirmButtonLoading,round:e.roundButton,size:"small"},on:{keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key,"Enter"))return null;e.handleAction("confirm")}},nativeOn:{click:function(t){e.handleAction("confirm")}}},[e._v("\n "+e._s(e.confirmButtonText||e.t("el.messagebox.confirm"))+"\n ")])],1)])])])},[],!1,null,null,null);eo.options.__file="main.vue";var to=eo.exports,no="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},io={title:null,message:"",type:"",iconClass:"",showInput:!1,showClose:!0,modalFade:!0,lockScroll:!0,closeOnClickModal:!0,closeOnPressEscape:!0,closeOnHashChange:!0,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,confirmButtonPosition:"right",confirmButtonHighlight:!1,cancelButtonHighlight:!1,confirmButtonText:"",cancelButtonText:"",confirmButtonClass:"",cancelButtonClass:"",customClass:"",beforeClose:null,dangerouslyUseHTMLString:!1,center:!1,roundButton:!1,distinguishCancelAndClose:!1},ro=w.a.extend(to),oo=void 0,so=void 0,ao=[],lo=function(e){if(oo){var t=oo.callback;"function"==typeof t&&(so.showInput?t(so.inputValue,e):t(e)),oo.resolve&&("confirm"===e?so.showInput?oo.resolve({value:so.inputValue,action:e}):oo.resolve(e):!oo.reject||"cancel"!==e&&"close"!==e||oo.reject(e))}},uo=function e(){if(so||((so=new ro({el:document.createElement("div")})).callback=lo),so.action="",(!so.visible||so.closeTimer)&&ao.length>0){var t=(oo=ao.shift()).options;for(var n in t)t.hasOwnProperty(n)&&(so[n]=t[n]);void 0===t.callback&&(so.callback=lo);var i=so.callback;so.callback=function(t,n){i(t,n),e()},bt(so.message)?(so.$slots.default=[so.message],so.message=null):delete so.$slots.default,["modal","showClose","closeOnClickModal","closeOnPressEscape","closeOnHashChange"].forEach(function(e){void 0===so[e]&&(so[e]=!0)}),document.body.appendChild(so.$el),w.a.nextTick(function(){so.visible=!0})}},co=function e(t,n){if(!w.a.prototype.$isServer){if("string"==typeof t||bt(t)?(t={message:t},"string"==typeof arguments[1]&&(t.title=arguments[1])):t.callback&&!n&&(n=t.callback),"undefined"!=typeof Promise)return new Promise(function(i,r){ao.push({options:g({},io,e.defaults,t),callback:n,resolve:i,reject:r}),uo()});ao.push({options:g({},io,e.defaults,t),callback:n}),uo()}};co.setDefaults=function(e){co.defaults=e},co.alert=function(e,t,n){return"object"===(void 0===t?"undefined":no(t))?(n=t,t=""):void 0===t&&(t=""),co(g({title:t,message:e,$type:"alert",closeOnPressEscape:!1,closeOnClickModal:!1},n))},co.confirm=function(e,t,n){return"object"===(void 0===t?"undefined":no(t))?(n=t,t=""):void 0===t&&(t=""),co(g({title:t,message:e,$type:"confirm",showCancelButton:!0},n))},co.prompt=function(e,t,n){return"object"===(void 0===t?"undefined":no(t))?(n=t,t=""):void 0===t&&(t=""),co(g({title:t,message:e,showCancelButton:!0,showInput:!0,$type:"prompt"},n))},co.close=function(){so.doClose(),so.visible=!1,ao=[],oo=null};var ho=co,po={name:"ElBreadcrumb",props:{separator:{type:String,default:"/"},separatorClass:{type:String,default:""}},provide:function(){return{elBreadcrumb:this}},mounted:function(){var e=this.$el.querySelectorAll(".el-breadcrumb__item");e.length&&e[e.length-1].setAttribute("aria-current","page")}},fo=Object(r.a)(po,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-breadcrumb",attrs:{"aria-label":"Breadcrumb",role:"navigation"}},[this._t("default")],2)},[],!1,null,null,null);fo.options.__file="breadcrumb.vue";var mo=fo.exports;mo.install=function(e){e.component(mo.name,mo)};var go=mo,vo={name:"ElBreadcrumbItem",props:{to:{},replace:Boolean},data:function(){return{separator:"",separatorClass:""}},inject:["elBreadcrumb"],mounted:function(){var e=this;this.separator=this.elBreadcrumb.separator,this.separatorClass=this.elBreadcrumb.separatorClass;var t=this.$refs.link;t.setAttribute("role","link"),t.addEventListener("click",function(t){var n=e.to,i=e.$router;n&&i&&(e.replace?i.replace(n):i.push(n))})}},yo=Object(r.a)(vo,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-breadcrumb__item"},[t("span",{ref:"link",class:["el-breadcrumb__inner",this.to?"is-link":""],attrs:{role:"link"}},[this._t("default")],2),this.separatorClass?t("i",{staticClass:"el-breadcrumb__separator",class:this.separatorClass}):t("span",{staticClass:"el-breadcrumb__separator",attrs:{role:"presentation"}},[this._v(this._s(this.separator))])])},[],!1,null,null,null);yo.options.__file="breadcrumb-item.vue";var bo=yo.exports;bo.install=function(e){e.component(bo.name,bo)};var Mo=bo,wo={name:"ElForm",componentName:"ElForm",provide:function(){return{elForm:this}},props:{model:Object,rules:Object,labelPosition:String,labelWidth:String,labelSuffix:{type:String,default:""},inline:Boolean,inlineMessage:Boolean,statusIcon:Boolean,showMessage:{type:Boolean,default:!0},size:String,disabled:Boolean,validateOnRuleChange:{type:Boolean,default:!0},hideRequiredAsterisk:{type:Boolean,default:!1}},watch:{rules:function(){this.validateOnRuleChange&&this.validate(function(){})}},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.model?this.fields.forEach(function(e){e.resetField()}):console.warn("[Element Warn][Form]model is required for resetFields to work.")},clearValidate:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];(e.length?"string"==typeof e?this.fields.filter(function(t){return e===t.prop}):this.fields.filter(function(t){return e.indexOf(t.prop)>-1}):this.fields).forEach(function(e){e.clearValidate()})},validate:function(e){var t=this;if(this.model){var n=void 0;"function"!=typeof e&&window.Promise&&(n=new window.Promise(function(t,n){e=function(e){e?t(e):n(e)}}));var i=!0,r=0;0===this.fields.length&&e&&e(!0);var o={};return this.fields.forEach(function(n){n.validate("",function(n,s){n&&(i=!1),o=g({},o,s),"function"==typeof e&&++r===t.fields.length&&e(i,o)})}),n||void 0}console.warn("[Element Warn][Form]model is required for validate to work!")},validateField:function(e,t){e=[].concat(e);var n=this.fields.filter(function(t){return-1!==e.indexOf(t.prop)});n.length?n.forEach(function(e){e.validate("",t)}):console.warn("[Element Warn]please pass correct props!")}}},Co=Object(r.a)(wo,function(){var e=this.$createElement;return(this._self._c||e)("form",{staticClass:"el-form",class:[this.labelPosition?"el-form--label-"+this.labelPosition:"",{"el-form--inline":this.inline}]},[this._t("default")],2)},[],!1,null,null,null);Co.options.__file="form.vue";var xo=Co.exports;xo.install=function(e){e.component(xo.name,xo)};var No=xo,Do=n(9),_o=n.n(Do),Io=n(6),ko=n.n(Io),jo=/%[sdj%]/g,To=function(){};function So(){for(var e=arguments.length,t=Array(e),n=0;n=o)return e;switch(e){case"%s":return String(t[i++]);case"%d":return Number(t[i++]);case"%j":try{return JSON.stringify(t[i++])}catch(e){return"[Circular]"}break;default:return e}}),a=t[i];i()\[\]\\.,;:\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},Uo={integer:function(e){return Uo.number(e)&&parseInt(e,10)===e},float:function(e){return Uo.number(e)&&!Uo.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"===(void 0===e?"undefined":ko()(e))&&!Uo.array(e)},method:function(e){return"function"==typeof e},email:function(e){return"string"==typeof e&&!!e.match(Fo.email)&&e.length<255},url:function(e){return"string"==typeof e&&!!e.match(Fo.url)},hex:function(e){return"string"==typeof e&&!!e.match(Fo.hex)}};var Yo=function(e,t,n,i,r){if(e.required&&void 0===t)$o(e,t,n,i,r);else{var o=e.type;["integer","float","array","regexp","object","method","email","number","date","url","hex"].indexOf(o)>-1?Uo[o](t)||i.push(So(r.messages.types[o],e.fullField,e.type)):o&&(void 0===t?"undefined":ko()(t))!==e.type&&i.push(So(r.messages.types[o],e.fullField,e.type))}};var Ro="enum";var Bo={required:$o,whitespace:Po,type:Yo,range:function(e,t,n,i,r){var o="number"==typeof e.len,s="number"==typeof e.min,a="number"==typeof e.max,l=t,u=null,c="number"==typeof t,h="string"==typeof t,d=Array.isArray(t);if(c?u="number":h?u="string":d&&(u="array"),!u)return!1;d&&(l=t.length),h&&(l=t.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,"_").length),o?l!==e.len&&i.push(So(r.messages[u].len,e.fullField,e.len)):s&&!a&&le.max?i.push(So(r.messages[u].max,e.fullField,e.max)):s&&a&&(le.max)&&i.push(So(r.messages[u].range,e.fullField,e.min,e.max))},enum:function(e,t,n,i,r){e[Ro]=Array.isArray(e[Ro])?e[Ro]:[],-1===e[Ro].indexOf(t)&&i.push(So(r.messages[Ro],e.fullField,e[Ro].join(", ")))},pattern:function(e,t,n,i,r){e.pattern&&(e.pattern instanceof RegExp?(e.pattern.lastIndex=0,e.pattern.test(t)||i.push(So(r.messages.pattern.mismatch,e.fullField,t,e.pattern))):"string"==typeof e.pattern&&(new RegExp(e.pattern).test(t)||i.push(So(r.messages.pattern.mismatch,e.fullField,t,e.pattern))))}};var Qo="enum";var Vo=function(e,t,n,i,r){var o=e.type,s=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t,o)&&!e.required)return n();Bo.required(e,t,i,s,r,o),Lo(t,o)||Bo.type(e,t,i,s,r)}n(s)},Ho={string:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t,"string")&&!e.required)return n();Bo.required(e,t,i,o,r,"string"),Lo(t,"string")||(Bo.type(e,t,i,o,r),Bo.range(e,t,i,o,r),Bo.pattern(e,t,i,o,r),!0===e.whitespace&&Bo.whitespace(e,t,i,o,r))}n(o)},method:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),void 0!==t&&Bo.type(e,t,i,o,r)}n(o)},number:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),void 0!==t&&(Bo.type(e,t,i,o,r),Bo.range(e,t,i,o,r))}n(o)},boolean:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),void 0!==t&&Bo.type(e,t,i,o,r)}n(o)},regexp:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),Lo(t)||Bo.type(e,t,i,o,r)}n(o)},integer:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),void 0!==t&&(Bo.type(e,t,i,o,r),Bo.range(e,t,i,o,r))}n(o)},float:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),void 0!==t&&(Bo.type(e,t,i,o,r),Bo.range(e,t,i,o,r))}n(o)},array:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t,"array")&&!e.required)return n();Bo.required(e,t,i,o,r,"array"),Lo(t,"array")||(Bo.type(e,t,i,o,r),Bo.range(e,t,i,o,r))}n(o)},object:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),void 0!==t&&Bo.type(e,t,i,o,r)}n(o)},enum:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),t&&Bo[Qo](e,t,i,o,r)}n(o)},pattern:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t,"string")&&!e.required)return n();Bo.required(e,t,i,o,r),Lo(t,"string")||Bo.pattern(e,t,i,o,r)}n(o)},date:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();if(Bo.required(e,t,i,o,r),!Lo(t)){var s=void 0;s="number"==typeof t?new Date(t):t,Bo.type(e,s,i,o,r),s&&Bo.range(e,s.getTime(),i,o,r)}}n(o)},url:Vo,hex:Vo,email:Vo,required:function(e,t,n,i,r){var o=[],s=Array.isArray(t)?"array":void 0===t?"undefined":ko()(t);Bo.required(e,t,i,o,r,s),n(o)}};function Wo(){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}}}var Go=Wo();function qo(e){this.rules=null,this._messages=Go,this.define(e)}qo.prototype={messages:function(e){return e&&(this._messages=zo(Wo(),e)),this._messages},define:function(e){if(!e)throw new Error("Cannot configure a schema with no rules");if("object"!==(void 0===e?"undefined":ko()(e))||Array.isArray(e))throw new Error("Rules must be an object");this.rules={};var t=void 0,n=void 0;for(t in e)e.hasOwnProperty(t)&&(n=e[t],this.rules[t]=Array.isArray(n)?n:[n])},validate:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=arguments[2],r=e,o=n,s=i;if("function"==typeof o&&(s=o,o={}),this.rules&&0!==Object.keys(this.rules).length){if(o.messages){var a=this.messages();a===Go&&(a=Wo()),zo(a,o.messages),o.messages=a}else o.messages=this.messages();var l=void 0,u=void 0,c={};(o.keys||Object.keys(this.rules)).forEach(function(n){l=t.rules[n],u=r[n],l.forEach(function(i){var o=i;"function"==typeof o.transform&&(r===e&&(r=_o()({},r)),u=r[n]=o.transform(u)),(o="function"==typeof o?{validator:o}:_o()({},o)).validator=t.getValidationMethod(o),o.field=n,o.fullField=o.fullField||n,o.type=t.getType(o),o.validator&&(c[n]=c[n]||[],c[n].push({rule:o,value:u,source:r,field:n}))})});var h={};Ao(c,o,function(e,t){var n=e.rule,i=!("object"!==n.type&&"array"!==n.type||"object"!==ko()(n.fields)&&"object"!==ko()(n.defaultField));function r(e,t){return _o()({},t,{fullField:n.fullField+"."+e})}function s(){var s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];if(Array.isArray(s)||(s=[s]),s.length&&To("async-validator:",s),s.length&&n.message&&(s=[].concat(n.message)),s=s.map(Eo(n)),o.first&&s.length)return h[n.field]=1,t(s);if(i){if(n.required&&!e.value)return s=n.message?[].concat(n.message).map(Eo(n)):o.error?[o.error(n,So(o.messages.required,n.field))]:[],t(s);var a={};if(n.defaultField)for(var l in e.value)e.value.hasOwnProperty(l)&&(a[l]=n.defaultField);for(var u in a=_o()({},a,e.rule.fields))if(a.hasOwnProperty(u)){var c=Array.isArray(a[u])?a[u]:[a[u]];a[u]=c.map(r.bind(null,u))}var d=new qo(a);d.messages(o.messages),e.rule.options&&(e.rule.options.messages=o.messages,e.rule.options.error=o.error),d.validate(e.value,e.rule.options||o,function(e){t(e&&e.length?s.concat(e):e)})}else t(s)}i=i&&(n.required||!n.required&&e.value),n.field=e.field;var a=n.validator(n,e.value,s,e.source,o);a&&a.then&&a.then(function(){return s()},function(e){return s(e)})},function(e){!function(e){var t,n=void 0,i=void 0,r=[],o={};for(n=0;n1&&void 0!==arguments[1]?arguments[1]:Y.k;this.validateDisabled=!1;var i=this.getFilteredRule(e);if((!i||0===i.length)&&void 0===this.required)return n(),!0;this.validateState="validating";var r={};i&&i.length>0&&i.forEach(function(e){delete e.trigger}),r[this.prop]=i;var o=new Zo(r),s={};s[this.prop]=this.fieldValue,o.validate(s,{firstFields:!0},function(e,i){t.validateState=e?"error":"success",t.validateMessage=e?e[0].message:"",n(t.validateMessage,i),t.elForm&&t.elForm.$emit("validate",t.prop,!e,t.validateMessage||null)})},clearValidate:function(){this.validateState="",this.validateMessage="",this.validateDisabled=!1},resetField:function(){this.validateState="",this.validateMessage="";var e=this.form.model,t=this.fieldValue,n=this.prop;-1!==n.indexOf(":")&&(n=n.replace(/:/,"."));var i=Object(Y.f)(e,n,!0);this.validateDisabled=!0,Array.isArray(t)?i.o[i.k]=[].concat(this.initialValue):i.o[i.k]=this.initialValue,this.broadcast("ElTimeSelect","fieldReset",this.initialValue)},getRules:function(){var e=this.form.rules,t=this.rules,n=void 0!==this.required?{required:!!this.required}:[],i=Object(Y.f)(e,this.prop||"");return e=e?i.o[this.prop||""]||i.v:[],[].concat(t||e||[]).concat(n)},getFilteredRule:function(e){return this.getRules().filter(function(t){return!t.trigger||""===e||(Array.isArray(t.trigger)?t.trigger.indexOf(e)>-1:t.trigger===e)}).map(function(e){return g({},e)})},onFieldBlur:function(){this.validate("blur")},onFieldChange:function(){this.validateDisabled?this.validateDisabled=!1:this.validate("change")}},mounted:function(){if(this.prop){this.dispatch("ElForm","el.form.addField",[this]);var e=this.fieldValue;Array.isArray(e)&&(e=[].concat(e)),Object.defineProperty(this,"initialValue",{value:e}),(this.getRules().length||void 0!==this.required)&&(this.$on("el.form.blur",this.onFieldBlur),this.$on("el.form.change",this.onFieldChange))}},beforeDestroy:function(){this.dispatch("ElForm","el.form.removeField",[this])}},Jo=Object(r.a)(Ko,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-form-item",class:[{"el-form-item--feedback":e.elForm&&e.elForm.statusIcon,"is-error":"error"===e.validateState,"is-validating":"validating"===e.validateState,"is-success":"success"===e.validateState,"is-required":e.isRequired||e.required,"is-no-asterisk":e.elForm&&e.elForm.hideRequiredAsterisk},e.sizeClass?"el-form-item--"+e.sizeClass:""]},[e.label||e.$slots.label?n("label",{staticClass:"el-form-item__label",style:e.labelStyle,attrs:{for:e.labelFor}},[e._t("label",[e._v(e._s(e.label+e.form.labelSuffix))])],2):e._e(),n("div",{staticClass:"el-form-item__content",style:e.contentStyle},[e._t("default"),n("transition",{attrs:{name:"el-zoom-in-top"}},["error"===e.validateState&&e.showMessage&&e.form.showMessage?e._t("error",[n("div",{staticClass:"el-form-item__error",class:{"el-form-item__error--inline":"boolean"==typeof e.inlineMessage?e.inlineMessage:e.elForm&&e.elForm.inlineMessage||!1}},[e._v("\n "+e._s(e.validateMessage)+"\n ")])],{error:e.validateMessage}):e._e()],2)],2)])},[],!1,null,null,null);Jo.options.__file="form-item.vue";var Xo=Jo.exports;Xo.install=function(e){e.component(Xo.name,Xo)};var es=Xo,ts={name:"TabBar",props:{tabs:Array},inject:["rootTabs"],computed:{barStyle:{get:function(){var e=this;if(!this.$parent.$refs.tabs)return{};var t={},n=0,i=0,r=-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height",o="width"===r?"x":"y",s=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})};this.tabs.every(function(t,o){var a=Object(Y.a)(e.$parent.$refs.tabs,function(e){return e.id.replace("tab-","")===t.paneName});return!!a&&(t.active?(i=a["client"+s(r)],"width"===r&&e.tabs.length>1&&(i-=0===o||o===e.tabs.length-1?20:40),!1):(n+=a["client"+s(r)],!0))}),"width"===r&&0!==n&&(n+=20);var a="translate"+s(o)+"("+n+"px)";return t[r]=i+"px",t.transform=a,t.msTransform=a,t.webkitTransform=a,t}}}},ns=Object(r.a)(ts,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-tabs__active-bar",class:"is-"+this.rootTabs.tabPosition,style:this.barStyle})},[],!1,null,null,null);ns.options.__file="tab-bar.vue";var is=ns.exports;function rs(){}var os=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})},ss={name:"TabNav",components:{TabBar:is},inject:["rootTabs"],props:{panes:Array,currentName:String,editable:Boolean,onTabClick:{type:Function,default:rs},onTabRemove:{type:Function,default:rs},type:String,stretch:Boolean},data:function(){return{scrollable:!1,navOffset:0,isFocus:!1,focusable:!0}},computed:{navStyle:function(){return{transform:"translate"+(-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"X":"Y")+"(-"+this.navOffset+"px)"}},sizeName:function(){return-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height"}},methods:{scrollPrev:function(){var e=this.$refs.navScroll["offset"+os(this.sizeName)],t=this.navOffset;if(t){var n=t>e?t-e:0;this.navOffset=n}},scrollNext:function(){var e=this.$refs.nav["offset"+os(this.sizeName)],t=this.$refs.navScroll["offset"+os(this.sizeName)],n=this.navOffset;if(!(e-n<=t)){var i=e-n>2*t?n+t:e-t;this.navOffset=i}},scrollToActiveTab:function(){if(this.scrollable){var e=this.$refs.nav,t=this.$el.querySelector(".is-active");if(t){var n=this.$refs.navScroll,i=t.getBoundingClientRect(),r=n.getBoundingClientRect(),o=e.offsetWidth-r.width,s=this.navOffset,a=s;i.leftr.right&&(a=s+i.right-r.right),a=Math.max(a,0),this.navOffset=Math.min(a,o)}}},update:function(){if(this.$refs.nav){var e=this.sizeName,t=this.$refs.nav["offset"+os(e)],n=this.$refs.navScroll["offset"+os(e)],i=this.navOffset;if(n0&&(this.navOffset=0)}},changeTab:function(e){var t=e.keyCode,n=void 0,i=void 0,r=void 0;-1!==[37,38,39,40].indexOf(t)&&(r=e.currentTarget.querySelectorAll("[role=tab]"),i=Array.prototype.indexOf.call(r,e.target),r[n=37===t||38===t?0===i?r.length-1:i-1:i0&&i.lazy&&i.defaultExpandAll&&this.expand(),Array.isArray(this.data)||vs(this,this.data),this.data){var s=i.defaultExpandedKeys,a=i.key;a&&s&&-1!==s.indexOf(this.key)&&this.expand(null,i.autoExpandParent),a&&void 0!==i.currentNodeKey&&this.key===i.currentNodeKey&&(i.currentNode=this),i.lazy&&i._initDefaultCheckedNode(this),this.updateLeafState()}}return e.prototype.setData=function(e){Array.isArray(e)||vs(this,e),this.data=e,this.childNodes=[];for(var t=void 0,n=0,i=(t=0===this.level&&this.data instanceof Array?this.data:Cs(this,"children")||[]).length;n1&&void 0!==arguments[1])||arguments[1];return function n(i){for(var r=i.childNodes||[],o=!1,s=0,a=r.length;s-1&&t.splice(n,1);var i=this.childNodes.indexOf(e);i>-1&&(this.store&&this.store.deregisterNode(e),e.parent=null,this.childNodes.splice(i,1)),this.updateLeafState()},e.prototype.removeChildByData=function(e){for(var t=null,n=0;n0;)i.expanded=!0,i=i.parent;n.expanded=!0,e&&e()};this.shouldLoadData()?this.loadData(function(e){e instanceof Array&&(n.checked?n.setChecked(!0,!0):n.store.checkStrictly||ws(n),i())}):i()},e.prototype.doCreateChildren=function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.forEach(function(e){t.insertChild(g({data:e},n),void 0,!0)})},e.prototype.collapse=function(){this.expanded=!1},e.prototype.shouldLoadData=function(){return!0===this.store.lazy&&this.store.load&&!this.loaded},e.prototype.updateLeafState=function(){if(!0!==this.store.lazy||!0===this.loaded||void 0===this.isLeafByUser){var e=this.childNodes;!this.store.lazy||!0===this.store.lazy&&!0===this.loaded?this.isLeaf=!e||0===e.length:this.isLeaf=!1}else this.isLeaf=this.isLeafByUser},e.prototype.setChecked=function(e,t,n,i){var r=this;if(this.indeterminate="half"===e,this.checked=!0===e,!this.store.checkStrictly){if(!this.shouldLoadData()||this.store.checkDescendants){var o=Ms(this.childNodes),s=o.all,a=o.allWithoutDisable;this.isLeaf||s||!a||(this.checked=!1,e=!1);var l=function(){if(t){for(var n=r.childNodes,o=0,s=n.length;o0&&void 0!==arguments[0]&&arguments[0];if(0===this.level)return this.data;var t=this.data;if(!t)return null;var n=this.store.props,i="children";return n&&(i=n.children||"children"),void 0===t[i]&&(t[i]=null),e&&!t[i]&&(t[i]=[]),t[i]},e.prototype.updateChildren=function(){var e=this,t=this.getChildren()||[],n=this.childNodes.map(function(e){return e.data}),i={},r=[];t.forEach(function(e,t){e[gs]?i[e[gs]]={index:t,data:e}:r.push({index:t,data:e})}),this.store.lazy||n.forEach(function(t){i[t[gs]]||e.removeChildByData(t)}),r.forEach(function(t){var n=t.index,i=t.data;e.insertChild({data:i},n)}),this.updateLeafState()},e.prototype.loadData=function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!0!==this.store.lazy||!this.store.load||this.loaded||this.loading&&!Object.keys(n).length)e&&e.call(this);else{this.loading=!0;this.store.load(this,function(i){t.loaded=!0,t.loading=!1,t.childNodes=[],t.doCreateChildren(i,n),t.updateLeafState(),ws(t),e&&e.call(t,i)})}},bs(e,[{key:"label",get:function(){return Cs(this,"label")}},{key:"key",get:function(){var e=this.store.key;return this.data?this.data[e]:null}},{key:"disabled",get:function(){return Cs(this,"disabled")}},{key:"nextSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(t>-1)return e.childNodes[t+1]}return null}},{key:"previousSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(t>-1)return t>0?e.childNodes[t-1]:null}return null}}]),e}(),Ds="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};var _s=function(){function e(t){var n=this;for(var i in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.currentNode=null,this.currentNodeKey=null,t)t.hasOwnProperty(i)&&(this[i]=t[i]);(this.nodesMap={},this.root=new Ns({data:this.data,store:this}),this.lazy&&this.load)?(0,this.load)(this.root,function(e){n.root.doCreateChildren(e),n._initDefaultCheckedNodes()}):this._initDefaultCheckedNodes()}return e.prototype.filter=function(e){var t=this.filterNodeMethod,n=this.lazy;!function i(r){var o=r.root?r.root.childNodes:r.childNodes;if(o.forEach(function(n){n.visible=t.call(n,e,n.data,n),i(n)}),!r.visible&&o.length){var s=!0;o.forEach(function(e){e.visible&&(s=!1)}),r.root?r.root.visible=!1===s:r.visible=!1===s}e&&(!r.visible||r.isLeaf||n||r.expand())}(this)},e.prototype.setData=function(e){e!==this.root.data?(this.root.setData(e),this._initDefaultCheckedNodes()):this.root.updateChildren()},e.prototype.getNode=function(e){if(e instanceof Ns)return e;var t="object"!==(void 0===e?"undefined":Ds(e))?e:ys(this.key,e);return this.nodesMap[t]||null},e.prototype.insertBefore=function(e,t){var n=this.getNode(t);n.parent.insertBefore({data:e},n)},e.prototype.insertAfter=function(e,t){var n=this.getNode(t);n.parent.insertAfter({data:e},n)},e.prototype.remove=function(e){var t=this.getNode(e);t&&t.parent&&t.parent.removeChild(t)},e.prototype.append=function(e,t){var n=t?this.getNode(t):this.root;n&&n.insertChild({data:e})},e.prototype._initDefaultCheckedNodes=function(){var e=this,t=this.defaultCheckedKeys||[],n=this.nodesMap;t.forEach(function(t){var i=n[t];i&&i.setChecked(!0,!e.checkStrictly)})},e.prototype._initDefaultCheckedNode=function(e){-1!==(this.defaultCheckedKeys||[]).indexOf(e.key)&&e.setChecked(!0,!this.checkStrictly)},e.prototype.setDefaultCheckedKey=function(e){e!==this.defaultCheckedKeys&&(this.defaultCheckedKeys=e,this._initDefaultCheckedNodes())},e.prototype.registerNode=function(e){this.key&&e&&e.data&&(void 0!==e.key&&(this.nodesMap[e.key]=e))},e.prototype.deregisterNode=function(e){var t=this;this.key&&e&&e.data&&(e.childNodes.forEach(function(e){t.deregisterNode(e)}),delete this.nodesMap[e.key])},e.prototype.getCheckedNodes=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=[];return function i(r){(r.root?r.root.childNodes:r.childNodes).forEach(function(r){(r.checked||t&&r.indeterminate)&&(!e||e&&r.isLeaf)&&n.push(r.data),i(r)})}(this),n},e.prototype.getCheckedKeys=function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return this.getCheckedNodes(t).map(function(t){return(t||{})[e.key]})},e.prototype.getHalfCheckedNodes=function(){var e=[];return function t(n){(n.root?n.root.childNodes:n.childNodes).forEach(function(n){n.indeterminate&&e.push(n.data),t(n)})}(this),e},e.prototype.getHalfCheckedKeys=function(){var e=this;return this.getHalfCheckedNodes().map(function(t){return(t||{})[e.key]})},e.prototype._getAllNodes=function(){var e=[],t=this.nodesMap;for(var n in t)t.hasOwnProperty(n)&&e.push(t[n]);return e},e.prototype.updateChildren=function(e,t){var n=this.nodesMap[e];if(n){for(var i=n.childNodes,r=i.length-1;r>=0;r--){var o=i[r];this.remove(o.data)}for(var s=0,a=t.length;s1&&void 0!==arguments[1]&&arguments[1],n=arguments[2],i=this._getAllNodes().sort(function(e,t){return t.level-e.level}),r=Object.create(null),o=Object.keys(n);i.forEach(function(e){return e.setChecked(!1,!1)});for(var s=0,a=i.length;s-1){for(var c=l.parent;c&&c.level>0;)r[c.data[e]]=!0,c=c.parent;l.isLeaf||this.checkStrictly?l.setChecked(!0,!1):(l.setChecked(!0,!0),t&&function(){l.setChecked(!1,!1);!function e(t){t.childNodes.forEach(function(t){t.isLeaf||t.setChecked(!1,!1),e(t)})}(l)}())}else l.checked&&!r[u]&&l.setChecked(!1,!1)}},e.prototype.setCheckedNodes=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=this.key,i={};e.forEach(function(e){i[(e||{})[n]]=!0}),this._setCheckedKeys(n,t,i)},e.prototype.setCheckedKeys=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.defaultCheckedKeys=e;var n=this.key,i={};e.forEach(function(e){i[e]=!0}),this._setCheckedKeys(n,t,i)},e.prototype.setDefaultExpandedKeys=function(e){var t=this;e=e||[],this.defaultExpandedKeys=e,e.forEach(function(e){var n=t.getNode(e);n&&n.expand(null,t.autoExpandParent)})},e.prototype.setChecked=function(e,t,n){var i=this.getNode(e);i&&i.setChecked(!!t,n)},e.prototype.getCurrentNode=function(){return this.currentNode},e.prototype.setCurrentNode=function(e){this.currentNode=e},e.prototype.setUserCurrentNode=function(e){var t=e[this.key],n=this.nodesMap[t];this.setCurrentNode(n)},e.prototype.setCurrentNodeKey=function(e){if(null!==e){var t=this.getNode(e);t&&(this.currentNode=t)}else this.currentNode=null},e}(),Is={name:"ElTreeNode",componentName:"ElTreeNode",mixins:[a],props:{node:{default:function(){return{}}},props:{},renderContent:Function,renderAfterExpand:{type:Boolean,default:!0},showCheckbox:{type:Boolean,default:!1}},components:{ElCollapseTransition:dt,ElCheckbox:Kt,NodeContent:{props:{node:{required:!0}},render:function(e){var t=this.$parent,n=t.tree,i=this.node,r=i.data,o=i.store;return t.renderContent?t.renderContent.call(t._renderProxy,e,{_self:n.$vnode.context,node:i,data:r,store:o}):n.$scopedSlots.default?n.$scopedSlots.default({node:i,data:r}):e("span",{class:"el-tree-node__label"},[i.label])}}},data:function(){return{tree:null,expanded:!1,childNodeRendered:!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){var t=this;this.$nextTick(function(){return t.expanded=e}),e&&(this.childNodeRendered=!0)}},methods:{getNodeKey:function(e){return ys(this.tree.nodeKey,e.data)},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.checkOnClickNode&&!this.node.disabled&&this.handleCheckChange(null,{target:{checked:!this.node.checked}}),this.tree.$emit("node-click",this.node.data,this.node,this)},handleContextMenu:function(e){this.tree._events["node-contextmenu"]&&this.tree._events["node-contextmenu"].length>0&&(e.stopPropagation(),e.preventDefault()),this.tree.$emit("node-contextmenu",e,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)))},handleCheckChange:function(e,t){var n=this;this.node.setChecked(t.target.checked,!this.tree.checkStrictly),this.$nextTick(function(){var e=n.tree.store;n.tree.$emit("check",n.node.data,{checkedNodes:e.getCheckedNodes(),checkedKeys:e.getCheckedKeys(),halfCheckedNodes:e.getHalfCheckedNodes(),halfCheckedKeys:e.getHalfCheckedKeys()})})},handleChildNodeExpand:function(e,t,n){this.broadcast("ElTreeNode","tree-node-expand",t),this.tree.$emit("node-expand",e,t,n)},handleDragStart:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-start",e,this)},handleDragOver:function(e){this.tree.draggable&&(this.tree.$emit("tree-node-drag-over",e,this),e.preventDefault())},handleDrop:function(e){e.preventDefault()},handleDragEnd:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-end",e,this)}},created:function(){var e=this,t=this.$parent;t.isTree?this.tree=t:this.tree=t.tree;var n=this.tree;n||console.warn("Can not find node's tree.");var i=(n.props||{}).children||"children";this.$watch("node.data."+i,function(){e.node.updateChildren()}),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()})}},ks=Object(r.a)(Is,function(){var e=this,t=this,n=t.$createElement,i=t._self._c||n;return i("div",{directives:[{name:"show",rawName:"v-show",value:t.node.visible,expression:"node.visible"}],ref:"node",staticClass:"el-tree-node",class:{"is-expanded":t.expanded,"is-current":t.tree.store.currentNode===t.node,"is-hidden":!t.node.visible,"is-focusable":!t.node.disabled,"is-checked":!t.node.disabled&&t.node.checked},attrs:{role:"treeitem",tabindex:"-1","aria-expanded":t.expanded,"aria-disabled":t.node.disabled,"aria-checked":t.node.checked,draggable:t.tree.draggable},on:{click:function(e){return e.stopPropagation(),t.handleClick(e)},contextmenu:function(t){return e.handleContextMenu(t)},dragstart:function(e){return e.stopPropagation(),t.handleDragStart(e)},dragover:function(e){return e.stopPropagation(),t.handleDragOver(e)},dragend:function(e){return e.stopPropagation(),t.handleDragEnd(e)},drop:function(e){return e.stopPropagation(),t.handleDrop(e)}}},[i("div",{staticClass:"el-tree-node__content",style:{"padding-left":(t.node.level-1)*t.tree.indent+"px"}},[i("span",{class:[{"is-leaf":t.node.isLeaf,expanded:!t.node.isLeaf&&t.expanded},"el-tree-node__expand-icon",t.tree.iconClass?t.tree.iconClass:"el-icon-caret-right"],on:{click:function(e){return e.stopPropagation(),t.handleExpandIconClick(e)}}}),t.showCheckbox?i("el-checkbox",{attrs:{indeterminate:t.node.indeterminate,disabled:!!t.node.disabled},on:{change:t.handleCheckChange},nativeOn:{click:function(e){e.stopPropagation()}},model:{value:t.node.checked,callback:function(e){t.$set(t.node,"checked",e)},expression:"node.checked"}}):t._e(),t.node.loading?i("span",{staticClass:"el-tree-node__loading-icon el-icon-loading"}):t._e(),i("node-content",{attrs:{node:t.node}})],1),i("el-collapse-transition",[!t.renderAfterExpand||t.childNodeRendered?i("div",{directives:[{name:"show",rawName:"v-show",value:t.expanded,expression:"expanded"}],staticClass:"el-tree-node__children",attrs:{role:"group","aria-expanded":t.expanded}},t._l(t.node.childNodes,function(e){return i("el-tree-node",{key:t.getNodeKey(e),attrs:{"render-content":t.renderContent,"render-after-expand":t.renderAfterExpand,"show-checkbox":t.showCheckbox,node:e},on:{"node-expand":t.handleChildNodeExpand}})}),1):t._e()])],1)},[],!1,null,null,null);ks.options.__file="tree-node.vue";var js={name:"ElTree",mixins:[a],components:{ElTreeNode:ks.exports},data:function(){return{store:null,root:null,currentNode:null,treeItems:null,checkboxItems:[],dragState:{showDropIndicator:!1,draggingNode:null,dropNode:null,allowDrop:!0}}},props:{data:{type:Array},emptyText:{type:String,default:function(){return Object(u.b)("el.tree.emptyText")}},renderAfterExpand:{type:Boolean,default:!0},nodeKey:String,checkStrictly:Boolean,defaultExpandAll:Boolean,expandOnClickNode:{type:Boolean,default:!0},checkOnClickNode:Boolean,checkDescendants:{type:Boolean,default:!1},autoExpandParent:{type:Boolean,default:!0},defaultCheckedKeys:Array,defaultExpandedKeys:Array,currentNodeKey:[String,Number],renderContent:Function,showCheckbox:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},allowDrag:Function,allowDrop:Function,props:{default:function(){return{children:"children",label:"label",disabled:"disabled"}}},lazy:{type:Boolean,default:!1},highlightCurrent:Boolean,load:Function,filterNodeMethod:Function,accordion:Boolean,indent:{type:Number,default:18},iconClass:String},computed:{children:{set:function(e){this.data=e},get:function(){return this.data}},treeItemArray:function(){return Array.prototype.slice.call(this.treeItems)},isEmpty:function(){var e=this.root.childNodes;return!e||0===e.length||e.every(function(e){return!e.visible})}},watch:{defaultCheckedKeys:function(e){this.store.setDefaultCheckedKey(e)},defaultExpandedKeys:function(e){this.store.defaultExpandedKeys=e,this.store.setDefaultExpandedKeys(e)},data:function(e){this.store.setData(e)},checkboxItems:function(e){Array.prototype.forEach.call(e,function(e){e.setAttribute("tabindex",-1)})},checkStrictly:function(e){this.store.checkStrictly=e}},methods:{filter:function(e){if(!this.filterNodeMethod)throw new Error("[Tree] filterNodeMethod is required when filter");this.store.filter(e)},getNodeKey:function(e){return ys(this.nodeKey,e.data)},getNodePath:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getNodePath");var t=this.store.getNode(e);if(!t)return[];for(var n=[t.data],i=t.parent;i&&i!==this.root;)n.push(i.data),i=i.parent;return n.reverse()},getCheckedNodes:function(e,t){return this.store.getCheckedNodes(e,t)},getCheckedKeys:function(e){return this.store.getCheckedKeys(e)},getCurrentNode:function(){var e=this.store.getCurrentNode();return e?e.data:null},getCurrentKey:function(){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getCurrentKey");var e=this.getCurrentNode();return e?e[this.nodeKey]:null},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 setCheckedKeys");this.store.setCheckedKeys(e,t)},setChecked:function(e,t,n){this.store.setChecked(e,t,n)},getHalfCheckedNodes:function(){return this.store.getHalfCheckedNodes()},getHalfCheckedKeys:function(){return this.store.getHalfCheckedKeys()},setCurrentNode:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentNode");this.store.setUserCurrentNode(e)},setCurrentKey:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentKey");this.store.setCurrentNodeKey(e)},getNode:function(e){return this.store.getNode(e)},remove:function(e){this.store.remove(e)},append:function(e,t){this.store.append(e,t)},insertBefore:function(e,t){this.store.insertBefore(e,t)},insertAfter:function(e,t){this.store.insertAfter(e,t)},handleNodeExpand:function(e,t,n){this.broadcast("ElTreeNode","tree-node-expand",t),this.$emit("node-expand",e,t,n)},updateKeyChildren:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in updateKeyChild");this.store.updateChildren(e,t)},initTabIndex:function(){this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]");var e=this.$el.querySelectorAll(".is-checked[role=treeitem]");e.length?e[0].setAttribute("tabindex",0):this.treeItems[0]&&this.treeItems[0].setAttribute("tabindex",0)},handleKeydown:function(e){var t=e.target;if(-1!==t.className.indexOf("el-tree-node")){var n=e.keyCode;this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]");var i=this.treeItemArray.indexOf(t),r=void 0;[38,40].indexOf(n)>-1&&(e.preventDefault(),r=38===n?0!==i?i-1:0:i-1&&(e.preventDefault(),t.click());var o=t.querySelector('[type="checkbox"]');[13,32].indexOf(n)>-1&&o&&(e.preventDefault(),o.click())}}},created:function(){var e=this;this.isTree=!0,this.store=new _s({key:this.nodeKey,data:this.data,lazy:this.lazy,props:this.props,load:this.load,currentNodeKey:this.currentNodeKey,checkStrictly:this.checkStrictly,checkDescendants:this.checkDescendants,defaultCheckedKeys:this.defaultCheckedKeys,defaultExpandedKeys:this.defaultExpandedKeys,autoExpandParent:this.autoExpandParent,defaultExpandAll:this.defaultExpandAll,filterNodeMethod:this.filterNodeMethod}),this.root=this.store.root;var t=this.dragState;this.$on("tree-node-drag-start",function(n,i){if("function"==typeof e.allowDrag&&!e.allowDrag(i.node))return n.preventDefault(),!1;n.dataTransfer.effectAllowed="move";try{n.dataTransfer.setData("text/plain","")}catch(e){}t.draggingNode=i,e.$emit("node-drag-start",i.node,n)}),this.$on("tree-node-drag-over",function(n,i){var r=function(e,t){for(var n=e;n&&"BODY"!==n.tagName;){if(n.__vue__&&n.__vue__.$options.name===t)return n.__vue__;n=n.parentNode}return null}(n.target,"ElTreeNode"),o=t.dropNode;o&&o!==r&&Object(C.g)(o.$el,"is-drop-inner");var s=t.draggingNode;if(s&&r){var a=!0,l=!0,u=!0,c=!0;"function"==typeof e.allowDrop&&(a=e.allowDrop(s.node,r.node,"prev"),c=l=e.allowDrop(s.node,r.node,"inner"),u=e.allowDrop(s.node,r.node,"next")),n.dataTransfer.dropEffect=l?"move":"none",(a||l||u)&&o!==r&&(o&&e.$emit("node-drag-leave",s.node,o.node,n),e.$emit("node-drag-enter",s.node,r.node,n)),(a||l||u)&&(t.dropNode=r),r.node.nextSibling===s.node&&(u=!1),r.node.previousSibling===s.node&&(a=!1),r.node.contains(s.node,!1)&&(l=!1),(s.node===r.node||s.node.contains(r.node))&&(a=!1,l=!1,u=!1);var h=r.$el.getBoundingClientRect(),d=e.$el.getBoundingClientRect(),p=void 0,f=a?l?.25:u?.45:1:-1,m=u?l?.75:a?.55:0:1,g=-9999,v=n.clientY-h.top;p=vh.height*m?"after":l?"inner":"none";var y=r.$el.querySelector(".el-tree-node__expand-icon").getBoundingClientRect(),b=e.$refs.dropIndicator;"before"===p?g=y.top-d.top:"after"===p&&(g=y.bottom-d.top),b.style.top=g+"px",b.style.left=y.right-d.left+"px","inner"===p?Object(C.a)(r.$el,"is-drop-inner"):Object(C.g)(r.$el,"is-drop-inner"),t.showDropIndicator="before"===p||"after"===p,t.allowDrop=t.showDropIndicator||c,t.dropType=p,e.$emit("node-drag-over",s.node,r.node,n)}}),this.$on("tree-node-drag-end",function(n){var i=t.draggingNode,r=t.dropType,o=t.dropNode;if(n.preventDefault(),n.dataTransfer.dropEffect="move",i&&o){var s={data:i.node.data};"none"!==r&&i.node.remove(),"before"===r?o.node.parent.insertBefore(s,o.node):"after"===r?o.node.parent.insertAfter(s,o.node):"inner"===r&&o.node.insertChild(s),"none"!==r&&e.store.registerNode(s),Object(C.g)(o.$el,"is-drop-inner"),e.$emit("node-drag-end",i.node,o.node,r,n),"none"!==r&&e.$emit("node-drop",i.node,o.node,r,n)}i&&!o&&e.$emit("node-drag-end",i.node,null,r,n),t.showDropIndicator=!1,t.draggingNode=null,t.dropNode=null,t.allowDrop=!0})},mounted:function(){this.initTabIndex(),this.$el.addEventListener("keydown",this.handleKeydown)},updated:function(){this.treeItems=this.$el.querySelectorAll("[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]")}},Ts=Object(r.a)(js,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-tree",class:{"el-tree--highlight-current":e.highlightCurrent,"is-dragging":!!e.dragState.draggingNode,"is-drop-not-allow":!e.dragState.allowDrop,"is-drop-inner":"inner"===e.dragState.dropType},attrs:{role:"tree"}},[e._l(e.root.childNodes,function(t){return n("el-tree-node",{key:e.getNodeKey(t),attrs:{node:t,props:e.props,"render-after-expand":e.renderAfterExpand,"show-checkbox":e.showCheckbox,"render-content":e.renderContent},on:{"node-expand":e.handleNodeExpand}})}),e.isEmpty?n("div",{staticClass:"el-tree__empty-block"},[n("span",{staticClass:"el-tree__empty-text"},[e._v(e._s(e.emptyText))])]):e._e(),n("div",{directives:[{name:"show",rawName:"v-show",value:e.dragState.showDropIndicator,expression:"dragState.showDropIndicator"}],ref:"dropIndicator",staticClass:"el-tree__drop-indicator"})],2)},[],!1,null,null,null);Ts.options.__file="tree.vue";var Ss=Ts.exports;Ss.install=function(e){e.component(Ss.name,Ss)};var Ls=Ss,Os={success:"el-icon-success",warning:"el-icon-warning",error:"el-icon-error"},As={name:"ElAlert",props:{title:{type:String,default:""},description:{type:String,default:""},type:{type:String,default:"info"},closable:{type:Boolean,default:!0},closeText:{type:String,default:""},showIcon:Boolean,center:Boolean},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 Os[this.type]||"el-icon-info"},isBigIcon:function(){return this.description||this.$slots.default?"is-big":""},isBoldTitle:function(){return this.description||this.$slots.default?"is-bold":""}}},Es=Object(r.a)(As,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-alert-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-alert",class:[e.typeClass,e.center?"is-center":""],attrs:{role:"alert"}},[e.showIcon?n("i",{staticClass:"el-alert__icon",class:[e.iconClass,e.isBigIcon]}):e._e(),n("div",{staticClass:"el-alert__content"},[e.title||e.$slots.title?n("span",{staticClass:"el-alert__title",class:[e.isBoldTitle]},[e._t("title",[e._v(e._s(e.title))])],2):e._e(),e._t("default",[e.description?n("p",{staticClass:"el-alert__description"},[e._v(e._s(e.description))]):e._e()]),n("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)])])},[],!1,null,null,null);Es.options.__file="main.vue";var zs=Es.exports;zs.install=function(e){e.component(zs.name,zs)};var $s=zs,Ps={success:"success",info:"info",warning:"warning",error:"error"},Fs={data:function(){return{visible:!1,title:"",message:"",duration:4500,type:"",showClose:!0,customClass:"",iconClass:"",onClose:null,onClick:null,closed:!1,verticalOffset:0,timer:null,dangerouslyUseHTMLString:!1,position:"top-right"}},computed:{typeClass:function(){return this.type&&Ps[this.type]?"el-icon-"+Ps[this.type]:""},horizontalClass:function(){return this.position.indexOf("right")>-1?"right":"left"},verticalProperty:function(){return/^top-/.test(this.position)?"top":"bottom"},positionStyle:function(){var e;return(e={})[this.verticalProperty]=this.verticalOffset+"px",e}},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))},keydown:function(e){46===e.keyCode||8===e.keyCode?this.clearTimer():27===e.keyCode?this.closed||this.close():this.startTimer()}},mounted:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration)),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},Us=Object(r.a)(Fs,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-notification-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],class:["el-notification",e.customClass,e.horizontalClass],style:e.positionStyle,attrs:{role:"alert"},on:{mouseenter:function(t){e.clearTimer()},mouseleave:function(t){e.startTimer()},click:e.click}},[e.type||e.iconClass?n("i",{staticClass:"el-notification__icon",class:[e.typeClass,e.iconClass]}):e._e(),n("div",{staticClass:"el-notification__group",class:{"is-with-icon":e.typeClass||e.iconClass}},[n("h2",{staticClass:"el-notification__title",domProps:{textContent:e._s(e.title)}}),n("div",{directives:[{name:"show",rawName:"v-show",value:e.message,expression:"message"}],staticClass:"el-notification__content"},[e._t("default",[e.dangerouslyUseHTMLString?n("p",{domProps:{innerHTML:e._s(e.message)}}):n("p",[e._v(e._s(e.message))])])],2),e.showClose?n("div",{staticClass:"el-notification__closeBtn el-icon-close",on:{click:function(t){return t.stopPropagation(),e.close(t)}}}):e._e()])])])},[],!1,null,null,null);Us.options.__file="main.vue";var Ys=Us.exports,Rs=w.a.extend(Ys),Bs=void 0,Qs=[],Vs=1,Hs=function e(t){if(!w.a.prototype.$isServer){var n=(t=t||{}).onClose,i="notification_"+Vs++,r=t.position||"top-right";t.onClose=function(){e.close(i,n)},Bs=new Rs({data:t}),bt(t.message)&&(Bs.$slots.default=[t.message],t.message="REPLACED_BY_VNODE"),Bs.id=i,Bs.$mount(),document.body.appendChild(Bs.$el),Bs.visible=!0,Bs.dom=Bs.$el,Bs.dom.style.zIndex=j.nextZIndex();var o=t.offset||0;return Qs.filter(function(e){return e.position===r}).forEach(function(e){o+=e.$el.offsetHeight+16}),o+=16,Bs.verticalOffset=o,Qs.push(Bs),Bs}};["success","warning","info","error"].forEach(function(e){Hs[e]=function(t){return("string"==typeof t||bt(t))&&(t={message:t}),t.type=e,Hs(t)}}),Hs.close=function(e,t){var n=-1,i=Qs.length,r=Qs.filter(function(t,i){return t.id===e&&(n=i,!0)})[0];if(r&&("function"==typeof t&&t(r),Qs.splice(n,1),!(i<=1)))for(var o=r.position,s=r.dom.offsetHeight,a=n;a=0;e--)Qs[e].close()};var Ws=Hs,Gs={name:"ElSliderButton",components:{ElTooltip:wt},props:{value:{type:Number,default:0},vertical:{type:Boolean,default:!1},tooltipClass:String},data:function(){return{hovering:!1,dragging:!1,isClick:!1,startX:0,currentX:0,startY:0,currentY:0,startPosition:0,newPosition:null,oldValue:this.value}},computed:{disabled:function(){return this.$parent.sliderDisabled},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("touchmove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("touchend",this.onDragEnd),window.addEventListener("contextmenu",this.onDragEnd))},onLeftKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)-this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onRightKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)+this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onDragStart:function(e){this.dragging=!0,this.isClick=!0,"touchstart"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),this.vertical?this.startY=e.clientY:this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition),this.newPosition=this.startPosition},onDragging:function(e){if(this.dragging){this.isClick=!1,this.displayTooltip(),this.$parent.resetSize();var t=0;"touchmove"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),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.isClick||(e.setPosition(e.newPosition),e.$parent.emitChange())},0),window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("touchmove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("touchend",this.onDragEnd),window.removeEventListener("contextmenu",this.onDragEnd))},setPosition:function(e){var t=this;if(null!==e&&!isNaN(e)){e<0?e=0:e>100&&(e=100);var n=100/((this.max-this.min)/this.step),i=Math.round(e/n)*n*(this.max-this.min)*.01+this.min;i=parseFloat(i.toFixed(this.precision)),this.$emit("input",i),this.$nextTick(function(){t.$refs.tooltip&&t.$refs.tooltip.updatePopper()}),this.dragging||this.value===this.oldValue||(this.oldValue=this.value)}}}},qs=Object(r.a)(Gs,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"button",staticClass:"el-slider__button-wrapper",class:{hover:e.hovering,dragging:e.dragging},style:e.wrapperStyle,attrs:{tabindex:"0"},on:{mouseenter:e.handleMouseEnter,mouseleave:e.handleMouseLeave,mousedown:e.onButtonDown,touchstart:e.onButtonDown,focus:e.handleMouseEnter,blur:e.handleMouseLeave,keydown:[function(t){return"button"in t||!e._k(t.keyCode,"left",37,t.key,["Left","ArrowLeft"])?"button"in t&&0!==t.button?null:e.onLeftKeyDown(t):null},function(t){return"button"in t||!e._k(t.keyCode,"right",39,t.key,["Right","ArrowRight"])?"button"in t&&2!==t.button?null:e.onRightKeyDown(t):null},function(t){return"button"in t||!e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?(t.preventDefault(),e.onLeftKeyDown(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?(t.preventDefault(),e.onRightKeyDown(t)):null}]}},[n("el-tooltip",{ref:"tooltip",attrs:{placement:"top","popper-class":e.tooltipClass,disabled:!e.showTooltip}},[n("span",{attrs:{slot:"content"},slot:"content"},[e._v(e._s(e.formatValue))]),n("div",{staticClass:"el-slider__button",class:{hover:e.hovering,dragging:e.dragging}})])],1)},[],!1,null,null,null);qs.options.__file="button.vue";var Zs=qs.exports,Ks={name:"ElSlider",mixins:[a],inject:{elForm:{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},inputSize:{type:String,default:"small"},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},debounce:{type:Number,default:300},label:{type:String},tooltipClass:String},components:{ElInputNumber:At,SliderButton:Zs},data:function(){return{firstValue:null,secondValue:null,oldValue:null,dragging:!1,sliderSize:1}},watch:{value:function(e,t){this.dragging||Array.isArray(e)&&Array.isArray(t)&&e.every(function(e,n){return e===t[n]})||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,n){return t===e.oldValue[n]}):this.value!==this.oldValue},setValues:function(){if(this.min>this.max)console.error("[Element Error][Slider]min should not be greater than max.");else{var e=this.value;this.range&&Array.isArray(e)?e[1]this.max?this.$emit("input",[this.max,this.max]):e[0]this.max?this.$emit("input",[e[0],this.max]):(this.firstValue=e[0],this.secondValue=e[1],this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",[this.minValue,this.maxValue]),this.oldValue=e.slice())):this.range||"number"!=typeof e||isNaN(e)||(ethis.max?this.$emit("input",this.max):(this.firstValue=e,this.valueChanged()&&(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){var n=void 0;n=Math.abs(this.minValue-t)this.secondValue?"button1":"button2",this.$refs[n].setPosition(e)}else this.$refs.button1.setPosition(e)},onSliderClick:function(e){if(!this.sliderDisabled&&!this.dragging){if(this.resetSize(),this.vertical){var t=this.$refs.slider.getBoundingClientRect().bottom;this.setPosition((t-e.clientY)/this.sliderSize*100)}else{var n=this.$refs.slider.getBoundingClientRect().left;this.setPosition((e.clientX-n)/this.sliderSize*100)}this.emitChange()}},resetSize:function(){this.$refs.slider&&(this.sliderSize=this.$refs.slider["client"+(this.vertical?"Height":"Width")])},emitChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.range?[e.minValue,e.maxValue]:e.value)})}},computed:{stops:function(){var e=this;if(!this.showStops||this.min>this.max)return[];if(0===this.step)return[];for(var t=(this.max-this.min)/this.step,n=100*this.step/(this.max-this.min),i=[],r=1;r100*(e.maxValue-e.min)/(e.max-e.min)}):i.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}},sliderDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},mounted:function(){var e=void 0;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],e=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,e=this.firstValue),this.$el.setAttribute("aria-valuetext",e),this.$el.setAttribute("aria-label",this.label?this.label:"slider between "+this.min+" and "+this.max),this.resetSize(),window.addEventListener("resize",this.resetSize)},beforeDestroy:function(){window.removeEventListener("resize",this.resetSize)}},Js=Object(r.a)(Ks,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-slider",class:{"is-vertical":e.vertical,"el-slider--with-input":e.showInput},attrs:{role:"slider","aria-valuemin":e.min,"aria-valuemax":e.max,"aria-orientation":e.vertical?"vertical":"horizontal","aria-disabled":e.sliderDisabled}},[e.showInput&&!e.range?n("el-input-number",{ref:"input",staticClass:"el-slider__input",attrs:{step:e.step,disabled:e.sliderDisabled,controls:e.showInputControls,min:e.min,max:e.max,debounce:e.debounce,size:e.inputSize},on:{change:function(t){e.$nextTick(e.emitChange)}},model:{value:e.firstValue,callback:function(t){e.firstValue=t},expression:"firstValue"}}):e._e(),n("div",{ref:"slider",staticClass:"el-slider__runway",class:{"show-input":e.showInput,disabled:e.sliderDisabled},style:e.runwayStyle,on:{click:e.onSliderClick}},[n("div",{staticClass:"el-slider__bar",style:e.barStyle}),n("slider-button",{ref:"button1",attrs:{vertical:e.vertical,"tooltip-class":e.tooltipClass},model:{value:e.firstValue,callback:function(t){e.firstValue=t},expression:"firstValue"}}),e.range?n("slider-button",{ref:"button2",attrs:{vertical:e.vertical,"tooltip-class":e.tooltipClass},model:{value:e.secondValue,callback:function(t){e.secondValue=t},expression:"secondValue"}}):e._e(),e._l(e.stops,function(t,i){return e.showStops?n("div",{key:i,staticClass:"el-slider__stop",style:e.vertical?{bottom:t+"%"}:{left:t+"%"}}):e._e()})],2)],1)},[],!1,null,null,null);Js.options.__file="main.vue";var Xs=Js.exports;Xs.install=function(e){e.component(Xs.name,Xs)};var ea=Xs,ta={data:function(){return{text:null,spinner:null,background:null,fullscreen:!0,visible:!1,customClass:""}},methods:{handleAfterLeave:function(){this.$emit("after-leave")},setText:function(e){this.text=e}}},na=Object(r.a)(ta,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-loading-fade"},on:{"after-leave":e.handleAfterLeave}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-loading-mask",class:[e.customClass,{"is-fullscreen":e.fullscreen}],style:{backgroundColor:e.background||""}},[n("div",{staticClass:"el-loading-spinner"},[e.spinner?n("i",{class:e.spinner}):n("svg",{staticClass:"circular",attrs:{viewBox:"25 25 50 50"}},[n("circle",{staticClass:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})]),e.text?n("p",{staticClass:"el-loading-text"},[e._v(e._s(e.text))]):e._e()])])])},[],!1,null,null,null);na.options.__file="loading.vue";var ia=na.exports,ra=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:300,i=arguments.length>3&&void 0!==arguments[3]&&arguments[3];if(!e||!t)throw new Error("instance & callback is required");var r=!1,o=function(){r||(r=!0,t&&t.apply(null,arguments))};i?e.$once("after-leave",o):e.$on("after-leave",o),setTimeout(function(){o()},n+100)},oa=w.a.extend(ia),sa={install:function(e){if(!e.prototype.$isServer){var t=function(t,i){i.value?e.nextTick(function(){i.modifiers.fullscreen?(t.originalPosition=Object(C.b)(document.body,"position"),t.originalOverflow=Object(C.b)(document.body,"overflow"),t.maskStyle.zIndex=j.nextZIndex(),Object(C.a)(t.mask,"is-fullscreen"),n(document.body,t,i)):(Object(C.g)(t.mask,"is-fullscreen"),i.modifiers.body?(t.originalPosition=Object(C.b)(document.body,"position"),["top","left"].forEach(function(e){var n="top"===e?"scrollTop":"scrollLeft";t.maskStyle[e]=t.getBoundingClientRect()[e]+document.body[n]+document.documentElement[n]-parseInt(Object(C.b)(document.body,"margin-"+e),10)+"px"}),["height","width"].forEach(function(e){t.maskStyle[e]=t.getBoundingClientRect()[e]+"px"}),n(document.body,t,i)):(t.originalPosition=Object(C.b)(t,"position"),n(t,t,i)))}):(ra(t.instance,function(e){t.domVisible=!1;var n=i.modifiers.fullscreen||i.modifiers.body?document.body:t;Object(C.g)(n,"el-loading-parent--relative"),Object(C.g)(n,"el-loading-parent--hidden"),t.instance.hiding=!1},300,!0),t.instance.visible=!1,t.instance.hiding=!0)},n=function(t,n,i){n.domVisible||"none"===Object(C.b)(n,"display")||"hidden"===Object(C.b)(n,"visibility")||(Object.keys(n.maskStyle).forEach(function(e){n.mask.style[e]=n.maskStyle[e]}),"absolute"!==n.originalPosition&&"fixed"!==n.originalPosition&&Object(C.a)(t,"el-loading-parent--relative"),i.modifiers.fullscreen&&i.modifiers.lock&&Object(C.a)(t,"el-loading-parent--hidden"),n.domVisible=!0,t.appendChild(n.mask),e.nextTick(function(){n.instance.hiding?n.instance.$emit("after-leave"):n.instance.visible=!0}),n.domInserted=!0)};e.directive("loading",{bind:function(e,n,i){var r=e.getAttribute("element-loading-text"),o=e.getAttribute("element-loading-spinner"),s=e.getAttribute("element-loading-background"),a=e.getAttribute("element-loading-custom-class"),l=i.context,u=new oa({el:document.createElement("div"),data:{text:l&&l[r]||r,spinner:l&&l[o]||o,background:l&&l[s]||s,customClass:l&&l[a]||a,fullscreen:!!n.modifiers.fullscreen}});e.instance=u,e.mask=u.$el,e.maskStyle={},n.value&&t(e,n)},update:function(e,n){e.instance.setText(e.getAttribute("element-loading-text")),n.oldValue!==n.value&&t(e,n)},unbind:function(e,n){e.domInserted&&(e.mask&&e.mask.parentNode&&e.mask.parentNode.removeChild(e.mask),t(e,{value:!1,modifiers:n.modifiers})),e.instance&&e.instance.$destroy()}})}}},aa=sa,la=w.a.extend(ia),ua={text:null,fullscreen:!0,body:!1,lock:!1,customClass:""},ca=void 0;la.prototype.originalPosition="",la.prototype.originalOverflow="",la.prototype.close=function(){var e=this;this.fullscreen&&(ca=void 0),ra(this,function(t){var n=e.fullscreen||e.body?document.body:e.target;Object(C.g)(n,"el-loading-parent--relative"),Object(C.g)(n,"el-loading-parent--hidden"),e.$el&&e.$el.parentNode&&e.$el.parentNode.removeChild(e.$el),e.$destroy()},300),this.visible=!1};var ha=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!w.a.prototype.$isServer){if("string"==typeof(e=g({},ua,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&&ca)return ca;var t=e.body?document.body:e.target,n=new la({el:document.createElement("div"),data:e});return function(e,t,n){var i={};e.fullscreen?(n.originalPosition=Object(C.b)(document.body,"position"),n.originalOverflow=Object(C.b)(document.body,"overflow"),i.zIndex=j.nextZIndex()):e.body?(n.originalPosition=Object(C.b)(document.body,"position"),["top","left"].forEach(function(t){var n="top"===t?"scrollTop":"scrollLeft";i[t]=e.target.getBoundingClientRect()[t]+document.body[n]+document.documentElement[n]+"px"}),["height","width"].forEach(function(t){i[t]=e.target.getBoundingClientRect()[t]+"px"})):n.originalPosition=Object(C.b)(t,"position"),Object.keys(i).forEach(function(e){n.$el.style[e]=i[e]})}(e,t,n),"absolute"!==n.originalPosition&&"fixed"!==n.originalPosition&&Object(C.a)(t,"el-loading-parent--relative"),e.fullscreen&&e.lock&&Object(C.a)(t,"el-loading-parent--hidden"),t.appendChild(n.$el),w.a.nextTick(function(){n.visible=!0}),e.fullscreen&&(ca=n),n}},da={install:function(e){e.use(aa),e.prototype.$loading=ha},directive:aa,service:ha},pa={name:"ElIcon",props:{name:String}},fa=Object(r.a)(pa,function(){var e=this.$createElement;return(this._self._c||e)("i",{class:"el-icon-"+this.name})},[],!1,null,null,null);fa.options.__file="icon.vue";var ma=fa.exports;ma.install=function(e){e.component(ma.name,ma)};var ga=ma,va={name:"ElRow",componentName:"ElRow",props:{tag:{type:String,default:"div"},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}},render:function(e){return e(this.tag,{class:["el-row","start"!==this.justify?"is-justify-"+this.justify:"","top"!==this.align?"is-align-"+this.align:"",{"el-row--flex":"flex"===this.type}],style:this.style},this.$slots.default)},install:function(e){e.component(va.name,va)}},ya=va,ba="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},Ma={name:"ElCol",props:{span:{type:Number,default:24},tag:{type:String,default:"div"},offset:Number,pull:Number,push:Number,xs:[Number,Object],sm:[Number,Object],md:[Number,Object],lg:[Number,Object],xl:[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=[],i={};return this.gutter&&(i.paddingLeft=this.gutter/2+"px",i.paddingRight=i.paddingLeft),["span","offset","pull","push"].forEach(function(e){(t[e]||0===t[e])&&n.push("span"!==e?"el-col-"+e+"-"+t[e]:"el-col-"+t[e])}),["xs","sm","md","lg","xl"].forEach(function(e){if("number"==typeof t[e])n.push("el-col-"+e+"-"+t[e]);else if("object"===ba(t[e])){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(this.tag,{class:["el-col",n],style:i},this.$slots.default)},install:function(e){e.component(Ma.name,Ma)}},wa=Ma,Ca={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,validator:function(e){return["text","success","exception"].indexOf(e)>-1}},strokeWidth:{type:Number,default:6},textInside:{type:Boolean,default:!1},width:{type:Number,default:126},showText:{type:Boolean,default:!0},color:{type:String,default:""}},computed:{barStyle:function(){var e={};return e.width=this.percentage+"%",e.backgroundColor=this.color,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=void 0;if(this.color)e=this.color;else 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-close":"success"===this.status?"el-icon-check":"el-icon-close"},progressTextSize:function(){return"line"===this.type?12+.4*this.strokeWidth:.111111*this.width+2}}},xa=Object(r.a)(Ca,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("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}],attrs:{role:"progressbar","aria-valuenow":e.percentage,"aria-valuemin":"0","aria-valuemax":"100"}},["line"===e.type?n("div",{staticClass:"el-progress-bar"},[n("div",{staticClass:"el-progress-bar__outer",style:{height:e.strokeWidth+"px"}},[n("div",{staticClass:"el-progress-bar__inner",style:e.barStyle},[e.showText&&e.textInside?n("div",{staticClass:"el-progress-bar__innerText"},[e._v(e._s(e.percentage)+"%")]):e._e()])])]):n("div",{staticClass:"el-progress-circle",style:{height:e.width+"px",width:e.width+"px"}},[n("svg",{attrs:{viewBox:"0 0 100 100"}},[n("path",{staticClass:"el-progress-circle__track",attrs:{d:e.trackPath,stroke:"#e5e9f2","stroke-width":e.relativeStrokeWidth,fill:"none"}}),n("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?n("div",{staticClass:"el-progress__text",style:{fontSize:e.progressTextSize+"px"}},[e.status?["text"===e.status?e._t("default"):n("i",{class:e.iconClass})]:[e._v(e._s(e.percentage)+"%")]],2):e._e()])},[],!1,null,null,null);xa.options.__file="progress.vue";var Na=xa.exports;Na.install=function(e){e.component(Na.name,Na)};var Da=Na,_a={name:"ElUploadList",mixins:[c],data:function(){return{focusing:!1}},components:{ElProgress:Da},props:{files:{type:Array,default:function(){return[]}},disabled:{type:Boolean,default:!1},handlePreview:Function,listType:String},methods:{parsePercentage:function(e){return parseInt(e,10)},handleClick:function(e){this.handlePreview&&this.handlePreview(e)}}},Ia=Object(r.a)(_a,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition-group",{class:["el-upload-list","el-upload-list--"+e.listType,{"is-disabled":e.disabled}],attrs:{tag:"ul",name:"el-list"}},e._l(e.files,function(t){return n("li",{key:t.uid,class:["el-upload-list__item","is-"+t.status,e.focusing?"focusing":""],attrs:{tabindex:"0"},on:{keydown:function(n){if(!("button"in n)&&e._k(n.keyCode,"delete",[8,46],n.key,["Backspace","Delete","Del"]))return null;!e.disabled&&e.$emit("remove",t)},focus:function(t){e.focusing=!0},blur:function(t){e.focusing=!1},click:function(t){e.focusing=!1}}},["uploading"!==t.status&&["picture-card","picture"].indexOf(e.listType)>-1?n("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}):e._e(),n("a",{staticClass:"el-upload-list__item-name",on:{click:function(n){e.handleClick(t)}}},[n("i",{staticClass:"el-icon-document"}),e._v(e._s(t.name)+"\n ")]),n("label",{staticClass:"el-upload-list__item-status-label"},[n("i",{class:{"el-icon-upload-success":!0,"el-icon-circle-check":"text"===e.listType,"el-icon-check":["picture-card","picture"].indexOf(e.listType)>-1}})]),e.disabled?e._e():n("i",{staticClass:"el-icon-close",on:{click:function(n){e.$emit("remove",t)}}}),e.disabled?e._e():n("i",{staticClass:"el-icon-close-tip"},[e._v(e._s(e.t("el.upload.deleteTip")))]),"uploading"===t.status?n("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(),"picture-card"===e.listType?n("span",{staticClass:"el-upload-list__item-actions"},[e.handlePreview&&"picture-card"===e.listType?n("span",{staticClass:"el-upload-list__item-preview",on:{click:function(n){e.handlePreview(t)}}},[n("i",{staticClass:"el-icon-zoom-in"})]):e._e(),e.disabled?e._e():n("span",{staticClass:"el-upload-list__item-delete",on:{click:function(n){e.$emit("remove",t)}}},[n("i",{staticClass:"el-icon-delete"})])]):e._e()],1)}),0)},[],!1,null,null,null);Ia.options.__file="upload-list.vue";var ka=Ia.exports,ja=n(22),Ta=n.n(ja);var Sa={name:"ElUploadDrag",props:{disabled:Boolean},inject:{uploader:{default:""}},data:function(){return{dragover:!1}},methods:{onDragover:function(){this.disabled||(this.dragover=!0)},onDrop:function(e){if(!this.disabled&&this.uploader){var t=this.uploader.accept;this.dragover=!1,t?this.$emit("file",[].slice.call(e.dataTransfer.files).filter(function(e){var n=e.type,i=e.name,r=i.indexOf(".")>-1?"."+i.split(".").pop():"",o=n.replace(/\/.*$/,"");return t.split(",").map(function(e){return e.trim()}).filter(function(e){return e}).some(function(e){return/\..+$/.test(e)?r===e:/\/\*$/.test(e)?o===e.replace(/\/\*$/,""):!!/^[^\/]+\/[^\/]+$/.test(e)&&n===e})})):this.$emit("file",e.dataTransfer.files)}}}},La=Object(r.a)(Sa,function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"el-upload-dragger",class:{"is-dragover":e.dragover},on:{drop:function(t){return t.preventDefault(),e.onDrop(t)},dragover:function(t){return t.preventDefault(),e.onDragover(t)},dragleave:function(t){t.preventDefault(),e.dragover=!1}}},[e._t("default")],2)},[],!1,null,null,null);La.options.__file="upload-dragger.vue";var Oa={inject:["uploader"],components:{UploadDragger:La.exports},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:function(e){if("undefined"!=typeof XMLHttpRequest){var t=new XMLHttpRequest,n=e.action;t.upload&&(t.upload.onprogress=function(t){t.total>0&&(t.percent=t.loaded/t.total*100),e.onProgress(t)});var i=new FormData;e.data&&Object.keys(e.data).forEach(function(t){i.append(t,e.data[t])}),i.append(e.filename,e.file,e.file.name),t.onerror=function(t){e.onError(t)},t.onload=function(){if(t.status<200||t.status>=300)return e.onError(function(e,t,n){var i=void 0;i=n.response?""+(n.response.error||n.response):n.responseText?""+n.responseText:"fail to post "+e+" "+n.status;var r=new Error(i);return r.status=n.status,r.method="post",r.url=e,r}(n,0,t));e.onSuccess(function(e){var t=e.responseText||e.response;if(!t)return t;try{return JSON.parse(t)}catch(e){return t}}(t))},t.open("post",n,!0),e.withCredentials&&"withCredentials"in t&&(t.withCredentials=!0);var r=e.headers||{};for(var o in r)r.hasOwnProperty(o)&&null!==r[o]&&t.setRequestHeader(o,r[o]);return t.send(i),t}}},disabled:Boolean,limit:Number,onExceed:Function},data:function(){return{mouseover:!1,reqs:{}}},methods:{isImage:function(e){return-1!==e.indexOf("image")},handleChange:function(e){var t=e.target.files;t&&this.uploadFiles(t)},uploadFiles:function(e){var t=this;if(this.limit&&this.fileList.length+e.length>this.limit)this.onExceed&&this.onExceed(e,this.fileList);else{var n=Array.prototype.slice.call(e);this.multiple||(n=n.slice(0,1)),0!==n.length&&n.forEach(function(e){t.onStart(e),t.autoUpload&&t.upload(e)})}},upload:function(e){var t=this;if(this.$refs.input.value=null,!this.beforeUpload)return this.post(e);var n=this.beforeUpload(e);n&&n.then?n.then(function(n){var i=Object.prototype.toString.call(n);if("[object File]"===i||"[object Blob]"===i){for(var r in"[object Blob]"===i&&(n=new File([n],e.name,{type:e.type})),e)e.hasOwnProperty(r)&&(n[r]=e[r]);t.post(n)}else t.post(e)},function(){t.onRemove(null,e)}):!1!==n?this.post(e):this.onRemove(null,e)},abort:function(e){var t=this.reqs;if(e){var n=e;e.uid&&(n=e.uid),t[n]&&t[n].abort()}else Object.keys(t).forEach(function(e){t[e]&&t[e].abort(),delete t[e]})},post:function(e){var t=this,n=e.uid,i={headers:this.headers,withCredentials:this.withCredentials,file:e,data:this.data,filename:this.name,action:this.action,onProgress:function(n){t.onProgress(n,e)},onSuccess:function(i){t.onSuccess(i,e),delete t.reqs[n]},onError:function(i){t.onError(i,e),delete t.reqs[n]}},r=this.httpRequest(i);this.reqs[n]=r,r&&r.then&&r.then(i.onSuccess,i.onError)},handleClick:function(){this.disabled||(this.$refs.input.value=null,this.$refs.input.click())},handleKeydown:function(e){e.target===e.currentTarget&&(13!==e.keyCode&&32!==e.keyCode||this.handleClick())}},render:function(e){var t=this.handleClick,n=this.drag,i=this.name,r=this.handleChange,o=this.multiple,s=this.accept,a=this.listType,l=this.uploadFiles,u=this.disabled,c={class:{"el-upload":!0},on:{click:t,keydown:this.handleKeydown}};return c.class["el-upload--"+a]=!0,e("div",Ta()([c,{attrs:{tabindex:"0"}}]),[n?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:i,multiple:o,accept:s},ref:"input",on:{change:r}})])}},Aa=Object(r.a)(Oa,void 0,void 0,!1,null,null,null);Aa.options.__file="upload.vue";var Ea=Aa.exports;function za(){}var $a={name:"ElUpload",mixins:[h],components:{ElProgress:Da,UploadList:ka,Upload:Ea},provide:function(){return{uploader:this}},inject:{elForm:{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,beforeRemove:Function,onRemove:{type:Function,default:za},onChange:{type:Function,default:za},onPreview:{type:Function},onSuccess:{type:Function,default:za},onProgress:{type:Function,default:za},onError:{type:Function,default:za},fileList:{type:Array,default:function(){return[]}},autoUpload:{type:Boolean,default:!0},listType:{type:String,default:"text"},httpRequest:Function,disabled:Boolean,limit:Number,onExceed:{type:Function,default:za}},data:function(){return{uploadFiles:[],dragOver:!1,draging:!1,tempIndex:1}},computed:{uploadDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{listType:function(e){"picture-card"!==e&&"picture"!==e||this.uploadFiles.forEach(function(e){if(!e.url&&e.raw)try{e.url=URL.createObjectURL(e.raw)}catch(e){return void console.error("[Element Error][Upload]",e)}})},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=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};if("picture-card"===this.listType||"picture"===this.listType)try{t.url=URL.createObjectURL(e)}catch(e){return void console.error("[Element Error][Upload]",e)}this.uploadFiles.push(t),this.onChange(t,this.uploadFiles)},handleProgress:function(e,t){var n=this.getFile(t);this.onProgress(e,n,this.uploadFiles),n.status="uploading",n.percentage=e.percent||0},handleSuccess:function(e,t){var n=this.getFile(t);n&&(n.status="success",n.response=e,this.onSuccess(e,n,this.uploadFiles),this.onChange(n,this.uploadFiles))},handleError:function(e,t){var n=this.getFile(t),i=this.uploadFiles;n.status="fail",i.splice(i.indexOf(n),1),this.onError(e,n,this.uploadFiles),this.onChange(n,this.uploadFiles)},handleRemove:function(e,t){var n=this;t&&(e=this.getFile(t));var i=function(){n.abort(e);var t=n.uploadFiles;t.splice(t.indexOf(e),1),n.onRemove(e,t)};if(this.beforeRemove){if("function"==typeof this.beforeRemove){var r=this.beforeRemove(e,this.uploadFiles);r&&r.then?r.then(function(){i()},za):!1!==r&&i()}}else i()},getFile:function(e){var t=this.uploadFiles,n=void 0;return t.every(function(t){return!(n=e.uid===t.uid?t:null)}),n},abort:function(e){this.$refs["upload-inner"].abort(e)},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"}}}},beforeDestroy:function(){this.uploadFiles.forEach(function(e){e.url&&0===e.url.indexOf("blob:")&&URL.revokeObjectURL(e.url)})},render:function(e){var t=void 0;this.showFileList&&(t=e(ka,{attrs:{disabled:this.uploadDisabled,listType:this.listType,files:this.uploadFiles,handlePreview:this.onPreview},on:{remove:this.handleRemove}}));var n=e("upload",{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.uploadDisabled,limit:this.limit,"on-exceed":this.onExceed,"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"},[this.$slots.trigger||this.$slots.default]);return e("div",["picture-card"===this.listType?t:"",this.$slots.trigger?[n,this.$slots.default]:n,this.$slots.tip,"picture-card"!==this.listType?t:""])}},Pa=Object(r.a)($a,void 0,void 0,!1,null,null,null);Pa.options.__file="index.vue";var Fa=Pa.exports;Fa.install=function(e){e.component(Fa.name,Fa)};var Ua=Fa,Ya={name:"ElSpinner",props:{type:String,radius:{type:Number,default:100},strokeWidth:{type:Number,default:5},strokeColor:{type:String,default:"#efefef"}}},Ra=Object(r.a)(Ya,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-spinner"},[t("svg",{staticClass:"el-spinner-inner",style:{width:this.radius/2+"px",height:this.radius/2+"px"},attrs:{viewBox:"0 0 50 50"}},[t("circle",{staticClass:"path",attrs:{cx:"25",cy:"25",r:"20",fill:"none",stroke:this.strokeColor,"stroke-width":this.strokeWidth}})])])},[],!1,null,null,null);Ra.options.__file="spinner.vue";var Ba=Ra.exports;Ba.install=function(e){e.component(Ba.name,Ba)};var Qa=Ba,Va={success:"success",info:"info",warning:"warning",error:"error"},Ha={data:function(){return{visible:!1,message:"",duration:3e3,type:"info",iconClass:"",customClass:"",onClose:null,showClose:!1,closed:!1,timer:null,dangerouslyUseHTMLString:!1,center:!1}},computed:{typeClass:function(){return this.type&&!this.iconClass?"el-message__icon el-icon-"+Va[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)},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))},keydown:function(e){27===e.keyCode&&(this.closed||this.close())}},mounted:function(){this.startTimer(),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},Wa=Object(r.a)(Ha,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-message-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],class:["el-message",e.type&&!e.iconClass?"el-message--"+e.type:"",e.center?"is-center":"",e.showClose?"is-closable":"",e.customClass],attrs:{role:"alert"},on:{mouseenter:e.clearTimer,mouseleave:e.startTimer}},[e.iconClass?n("i",{class:e.iconClass}):n("i",{class:e.typeClass}),e._t("default",[e.dangerouslyUseHTMLString?n("p",{staticClass:"el-message__content",domProps:{innerHTML:e._s(e.message)}}):n("p",{staticClass:"el-message__content"},[e._v(e._s(e.message))])]),e.showClose?n("i",{staticClass:"el-message__closeBtn el-icon-close",on:{click:e.close}}):e._e()],2)])},[],!1,null,null,null);Wa.options.__file="main.vue";var Ga=Wa.exports,qa=w.a.extend(Ga),Za=void 0,Ka=[],Ja=1,Xa=function e(t){if(!w.a.prototype.$isServer){"string"==typeof(t=t||{})&&(t={message:t});var n=t.onClose,i="message_"+Ja++;return t.onClose=function(){e.close(i,n)},(Za=new qa({data:t})).id=i,bt(Za.message)&&(Za.$slots.default=[Za.message],Za.message=null),Za.vm=Za.$mount(),document.body.appendChild(Za.vm.$el),Za.vm.visible=!0,Za.dom=Za.vm.$el,Za.dom.style.zIndex=j.nextZIndex(),Ka.push(Za),Za.vm}};["success","warning","info","error"].forEach(function(e){Xa[e]=function(t){return"string"==typeof t&&(t={message:t}),t.type=e,Xa(t)}}),Xa.close=function(e,t){for(var n=0,i=Ka.length;n=0;e--)Ka[e].close()};var el=Xa,tl={name:"ElBadge",props:{value:{},max:Number,isDot:Boolean,hidden:Boolean,type:{type:String,validator:function(e){return["primary","success","warning","info","danger"].indexOf(e)>-1}}},computed:{content:function(){if(!this.isDot){var e=this.value,t=this.max;return"number"==typeof e&&"number"==typeof t&&t=this.highThreshold?t.highColor||t.highClass:t.mediumColor||t.mediumClass},showDecimalIcon:function(e){var t=this.rateDisabled&&this.valueDecimal>0&&e-1this.value,n=this.allowHalf&&this.pointerAtLeftHalf&&e-.5<=this.currentValue&&e>this.currentValue;return t||n},getIconStyle:function(e){var t=this.rateDisabled?this.colorMap.disabledVoidColor:this.colorMap.voidColor;return{color:e<=this.currentValue?this.activeColor:t}},selectValue:function(e){this.rateDisabled||(this.allowHalf&&this.pointerAtLeftHalf?(this.$emit("input",this.currentValue),this.$emit("change",this.currentValue)):(this.$emit("input",e),this.$emit("change",e)))},handleKey:function(e){if(!this.rateDisabled){var t=this.currentValue,n=e.keyCode;38===n||39===n?(this.allowHalf?t+=.5:t+=1,e.stopPropagation(),e.preventDefault()):37!==n&&40!==n||(this.allowHalf?t-=.5:t-=1,e.stopPropagation(),e.preventDefault()),t=(t=t<0?0:t)>this.max?this.max:t,this.$emit("input",t),this.$emit("change",t)}},setCurrentValue:function(e,t){if(!this.rateDisabled){if(this.allowHalf){var n=t.target;Object(C.c)(n,"el-rate__item")&&(n=n.querySelector(".el-rate__icon")),Object(C.c)(n,"el-rate__decimal")&&(n=n.parentNode),this.pointerAtLeftHalf=2*t.offsetX<=n.clientWidth,this.currentValue=this.pointerAtLeftHalf?e-.5:e}else this.currentValue=e;this.hoverIndex=e}},resetCurrentValue:function(){this.rateDisabled||(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)}},cl=Object(r.a)(ul,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-rate",attrs:{role:"slider","aria-valuenow":e.currentValue,"aria-valuetext":e.text,"aria-valuemin":"0","aria-valuemax":e.max,tabindex:"0"},on:{keydown:e.handleKey}},[e._l(e.max,function(t,i){return n("span",{key:i,staticClass:"el-rate__item",style:{cursor:e.rateDisabled?"auto":"pointer"},on:{mousemove:function(n){e.setCurrentValue(t,n)},mouseleave:e.resetCurrentValue,click:function(n){e.selectValue(t)}}},[n("i",{staticClass:"el-rate__icon",class:[e.classes[t-1],{hover:e.hoverIndex===t}],style:e.getIconStyle(t)},[e.showDecimalIcon(t)?n("i",{staticClass:"el-rate__decimal",class:e.decimalIconClass,style:e.decimalStyle}):e._e()])])}),e.showText||e.showScore?n("span",{staticClass:"el-rate__text",style:{color:e.textColor}},[e._v(e._s(e.text))]):e._e()],2)},[],!1,null,null,null);cl.options.__file="main.vue";var hl=cl.exports;hl.install=function(e){e.component(hl.name,hl)};var dl=hl,pl={name:"ElSteps",mixins:[h],props:{space:[Number,String],active:Number,direction:{type:String,default:"horizontal"},alignCenter:Boolean,simple:Boolean,finishStatus:{type:String,default:"finish"},processStatus:{type:String,default:"process"}},data:function(){return{steps:[],stepOffset:0}},methods:{getMigratingConfig:function(){return{props:{center:"center is removed."}}}},watch:{active:function(e,t){this.$emit("change",e,t)},steps:function(e){e.forEach(function(e,t){e.index=t})}}},fl=Object(r.a)(pl,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-steps",class:[!this.simple&&"el-steps--"+this.direction,this.simple&&"el-steps--simple"]},[this._t("default")],2)},[],!1,null,null,null);fl.options.__file="steps.vue";var ml=fl.exports;ml.install=function(e){e.component(ml.name,ml)};var gl=ml,vl={name:"ElStep",props:{title:String,icon:String,description:String,status:String},data:function(){return{index:-1,lineStyle:{},internalStatus:""}},beforeCreate:function(){this.$parent.steps.push(this)},beforeDestroy:function(){var e=this.$parent.steps,t=e.indexOf(this);t>=0&&e.splice(t,1)},computed:{currentStatus:function(){return this.status||this.internalStatus},prevStatus:function(){var e=this.$parent.steps[this.index-1];return e?e.currentStatus:"wait"},isCenter:function(){return this.$parent.alignCenter},isVertical:function(){return"vertical"===this.$parent.direction},isSimple:function(){return this.$parent.simple},isLast:function(){var e=this.$parent;return e.steps[e.steps.length-1]===this},stepsCount:function(){return this.$parent.steps.length},space:function(){var e=this.isSimple,t=this.$parent.space;return e?"":t},style:function(){var e={},t=this.$parent.steps.length,n="number"==typeof this.space?this.space+"px":this.space?this.space:100/(t-(this.isCenter?0:1))+"%";return e.flexBasis=n,this.isVertical?e:(this.isLast?e.maxWidth=100/this.stepsCount+"%":e.marginRight=-this.$parent.stepOffset+"px",e)}},methods:{updateStatus:function(e){var t=this.$parent.$children[this.index-1];e>this.index?this.internalStatus=this.$parent.finishStatus:e===this.index&&"error"!==this.prevStatus?this.internalStatus=this.$parent.processStatus:this.internalStatus="wait",t&&t.calcProgress(this.internalStatus)},calcProgress:function(e){var t=100,n={};n.transitionDelay=150*this.index+"ms",e===this.$parent.processStatus?(this.currentStatus,t=0):"wait"===e&&(t=0,n.transitionDelay=-150*this.index+"ms"),n.borderWidth=t?"1px":0,"vertical"===this.$parent.direction?n.height=t+"%":n.width=t+"%",this.lineStyle=n}},mounted:function(){var e=this,t=this.$watch("index",function(n){e.$watch("$parent.active",e.updateStatus,{immediate:!0}),t()})}},yl=Object(r.a)(vl,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-step",class:[!e.isSimple&&"is-"+e.$parent.direction,e.isSimple&&"is-simple",e.isLast&&!e.space&&!e.isCenter&&"is-flex",e.isCenter&&!e.isVertical&&!e.isSimple&&"is-center"],style:e.style},[n("div",{staticClass:"el-step__head",class:"is-"+e.currentStatus},[n("div",{staticClass:"el-step__line",style:e.isLast?"":{marginRight:e.$parent.stepOffset+"px"}},[n("i",{staticClass:"el-step__line-inner",style:e.lineStyle})]),n("div",{staticClass:"el-step__icon",class:"is-"+(e.icon?"icon":"text")},["success"!==e.currentStatus&&"error"!==e.currentStatus?e._t("icon",[e.icon?n("i",{staticClass:"el-step__icon-inner",class:[e.icon]}):e._e(),e.icon||e.isSimple?e._e():n("div",{staticClass:"el-step__icon-inner"},[e._v(e._s(e.index+1))])]):n("i",{staticClass:"el-step__icon-inner is-status",class:["el-icon-"+("success"===e.currentStatus?"check":"close")]})],2)]),n("div",{staticClass:"el-step__main"},[n("div",{ref:"title",staticClass:"el-step__title",class:["is-"+e.currentStatus]},[e._t("title",[e._v(e._s(e.title))])],2),e.isSimple?n("div",{staticClass:"el-step__arrow"}):n("div",{staticClass:"el-step__description",class:["is-"+e.currentStatus]},[e._t("description",[e._v(e._s(e.description))])],2)])])},[],!1,null,null,null);yl.options.__file="step.vue";var bl=yl.exports;bl.install=function(e){e.component(bl.name,bl)};var Ml=bl,wl=n(29),Cl=n.n(wl),xl={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,loop:{type:Boolean,default:!0}},data:function(){return{items:[],activeIndex:-1,containerWidth:0,timer:null,hover:!1}},computed:{hasLabel:function(){return this.items.some(function(e){return e.label.toString().length>0})}},watch:{items:function(e){e.length>0&&this.setActiveItem(this.initialIndex)},activeIndex:function(e,t){this.resetItemPosition(t),this.$emit("change",e,t)},autoplay:function(e){e?this.startTimer():this.pauseTimer()},loop:function(){this.setActiveItem(this.activeIndex)}},methods:{handleMouseEnter:function(){this.hover=!0,this.pauseTimer()},handleMouseLeave:function(){this.hover=!1,this.startTimer()},itemInStage:function(e,t){var n=this.items.length;return t===n-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[n-1].active||e.inStage&&this.items[t-1]&&this.items[t-1].active)&&"right"},handleButtonEnter:function(e){var t=this;this.items.forEach(function(n,i){e===t.itemInStage(n,i)&&(n.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(e){var t=this;this.items.forEach(function(n,i){n.translateItem(i,t.activeIndex,e)})},playSlides:function(){this.activeIndex0&&(e=this.items.indexOf(t[0]))}if(e=Number(e),!isNaN(e)&&e===Math.floor(e)){var n=this.items.length,i=this.activeIndex;this.activeIndex=e<0?this.loop?n-1:0:e>=n?this.loop?0:n-1:e,i===this.activeIndex&&this.resetItemPosition(i)}},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.throttledArrowClick=Cl()(300,!0,function(t){e.setActiveItem(t)}),this.throttledIndicatorHover=Cl()(300,function(t){e.handleIndicatorHover(t)})},mounted:function(){var e=this;this.updateItems(),this.$nextTick(function(){X(e.$el,e.resetItemPosition),e.initialIndex=0&&(e.activeIndex=e.initialIndex),e.startTimer()})},beforeDestroy:function(){this.$el&&ee(this.$el,this.resetItemPosition),this.pauseTimer()}},Nl=Object(r.a)(xl,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-carousel",class:{"el-carousel--card":"card"===e.type},on:{mouseenter:function(t){return t.stopPropagation(),e.handleMouseEnter(t)},mouseleave:function(t){return t.stopPropagation(),e.handleMouseLeave(t)}}},[n("div",{staticClass:"el-carousel__container",style:{height:e.height}},[n("transition",{attrs:{name:"carousel-arrow-left"}},["never"!==e.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===e.arrow||e.hover)&&(e.loop||e.activeIndex>0),expression:"(arrow === 'always' || hover) && (loop || activeIndex > 0)"}],staticClass:"el-carousel__arrow el-carousel__arrow--left",attrs:{type:"button"},on:{mouseenter:function(t){e.handleButtonEnter("left")},mouseleave:e.handleButtonLeave,click:function(t){t.stopPropagation(),e.throttledArrowClick(e.activeIndex-1)}}},[n("i",{staticClass:"el-icon-arrow-left"})]):e._e()]),n("transition",{attrs:{name:"carousel-arrow-right"}},["never"!==e.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===e.arrow||e.hover)&&(e.loop||e.activeIndex=n/2?n+1:e>t+1&&e-t>=n/2?-2:e},calculateTranslate:function(e,t,n){return this.inStage?n*(1.17*(e-t)+1)/4:e2&&this.$parent.loop&&(e=this.processIndex(e,t,r)),"card"===this.$parent.type?(this.inStage=Math.round(Math.abs(e-t))<=1,this.active=e===t,this.translate=this.calculateTranslate(e,t,i),this.scale=this.active?1:.83):(this.active=e===t,this.translate=i*(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.updateItems()},destroyed:function(){this.$parent&&this.$parent.updateItems()}},kl=Object(r.a)(Il,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("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,"is-animating":e.animating},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?n("div",{directives:[{name:"show",rawName:"v-show",value:!e.active,expression:"!active"}],staticClass:"el-carousel__mask"}):e._e(),e._t("default")],2)},[],!1,null,null,null);kl.options.__file="item.vue";var jl=kl.exports;jl.install=function(e){e.component(jl.name,jl)};var Tl=jl,Sl={name:"ElCollapse",componentName:"ElCollapse",props:{accordion:Boolean,value:{type:[Array,String,Number],default:function(){return[]}}},data:function(){return{activeNames:[].concat(this.value)}},provide:function(){return{collapse:this}},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),n=t.indexOf(e.name);n>-1?t.splice(n,1):t.push(e.name),this.setActiveNames(t)}}},created:function(){this.$on("item-click",this.handleItemClick)}},Ll=Object(r.a)(Sl,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-collapse",attrs:{role:"tablist","aria-multiselectable":"true"}},[this._t("default")],2)},[],!1,null,null,null);Ll.options.__file="collapse.vue";var Ol=Ll.exports;Ol.install=function(e){e.component(Ol.name,Ol)};var Al=Ol,El={name:"ElCollapseItem",componentName:"ElCollapseItem",mixins:[a],components:{ElCollapseTransition:dt},data:function(){return{contentWrapStyle:{height:"auto",display:"block"},contentHeight:0,focusing:!1,isClick:!1}},inject:["collapse"],props:{title:String,name:{type:[String,Number],default:function(){return this._uid}}},computed:{isActive:function(){return this.collapse.activeNames.indexOf(this.name)>-1},id:function(){return Object(Y.e)()}},methods:{handleFocus:function(){var e=this;setTimeout(function(){e.isClick?e.isClick=!1:e.focusing=!0},50)},handleHeaderClick:function(){this.dispatch("ElCollapse","item-click",this),this.focusing=!1,this.isClick=!0},handleEnterClick:function(){this.dispatch("ElCollapse","item-click",this)}}},zl=Object(r.a)(El,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-collapse-item",class:{"is-active":e.isActive}},[n("div",{attrs:{role:"tab","aria-expanded":e.isActive,"aria-controls":"el-collapse-content-"+e.id,"aria-describedby":"el-collapse-content-"+e.id}},[n("div",{staticClass:"el-collapse-item__header",class:{focusing:e.focusing,"is-active":e.isActive},attrs:{role:"button",id:"el-collapse-head-"+e.id,tabindex:"0"},on:{click:e.handleHeaderClick,keyup:function(t){return"button"in t||!e._k(t.keyCode,"space",32,t.key,[" ","Spacebar"])||!e._k(t.keyCode,"enter",13,t.key,"Enter")?(t.stopPropagation(),e.handleEnterClick(t)):null},focus:e.handleFocus,blur:function(t){e.focusing=!1}}},[e._t("title",[e._v(e._s(e.title))]),n("i",{staticClass:"el-collapse-item__arrow el-icon-arrow-right",class:{"is-active":e.isActive}})],2)]),n("el-collapse-transition",[n("div",{directives:[{name:"show",rawName:"v-show",value:e.isActive,expression:"isActive"}],staticClass:"el-collapse-item__wrap",attrs:{role:"tabpanel","aria-hidden":!e.isActive,"aria-labelledby":"el-collapse-head-"+e.id,id:"el-collapse-content-"+e.id}},[n("div",{staticClass:"el-collapse-item__content"},[e._t("default")],2)])])],1)},[],!1,null,null,null);zl.options.__file="collapse-item.vue";var $l=zl.exports;$l.install=function(e){e.component($l.name,$l)};var Pl=$l,Fl={name:"ElCascaderMenu",data:function(){return{inputWidth:0,options:[],props:{},visible:!1,activeValue:[],value:[],expandTrigger:"click",changeOnSelect:!1,popperClass:"",hoverTimer:0,clicking:!1,id:Object(Y.e)()}},watch:{visible:function(e){e&&(this.activeValue=this.value)},value:{immediate:!0,handler:function(e){this.activeValue=e}}},computed:{activeOptions:{get:function(){var e=this,t=this.activeValue,n=["label","value","children","disabled"],i=function e(t,n){if(!t||!Array.isArray(t)||!n)return t;var i=[],r=["__IS__FLAT__OPTIONS","label","value","disabled"],o=n.children||"children";return t.forEach(function(t){var s={};r.forEach(function(e){var i=n[e],r=t[i];void 0===r&&(r=t[i=e]),void 0!==r&&(s[i]=r)}),Array.isArray(t[o])&&(s[o]=e(t[o],n)),i.push(s)}),i}(this.options,this.props);return function t(i){i.forEach(function(i){i.__IS__FLAT__OPTIONS||(n.forEach(function(t){var n=i[e.props[t]||t];void 0!==n&&(i[t]=n)}),Array.isArray(i.children)&&t(i.children))})}(i),function e(n){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=i.length;i[r]=n;var o=t[r];return null!=o&&(n=n.filter(function(e){return e.value===o})[0])&&n.children&&e(n.children,i),i}(i)}}},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.slice())},handleMenuLeave:function(){this.$emit("menuLeave")},activeItem:function(e,t){var n=this.activeOptions.length;this.activeValue.splice(t,n,e.value),this.activeOptions.splice(t+1,n,e.children),this.changeOnSelect?this.$emit("pick",this.activeValue.slice(),!1):this.$emit("activeItemChange",this.activeValue)},scrollMenu:function(e){fe(e,e.getElementsByClassName("is-active")[0])},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.$refs.menus.forEach(function(t){return e.scrollMenu(t)})})}},render:function(e){var t=this,n=this.activeValue,i=this.activeOptions,r=this.visible,o=this.expandTrigger,s=this.popperClass,a=this.hoverThreshold,l=null,u=0,c={},h=function(e){var n=c.activeMenu;if(n){var i=e.offsetX,r=n.offsetWidth,o=n.offsetHeight;if(e.target===c.activeItem){clearTimeout(t.hoverTimer);var s=c.activeItem,l=s.offsetTop,u=l+s.offsetHeight;c.hoverZone.innerHTML='\n \n \n '}else t.hoverTimer||(t.hoverTimer=setTimeout(function(){c.hoverZone.innerHTML=""},a))}},d=this._l(i,function(i,r){var s=!1,a="menu-"+t.id+"-"+r,c="menu-"+t.id+"-"+(r+1),d=t._l(i,function(i){var h={on:{}};if(i.__IS__FLAT__OPTIONS&&(s=!0),!i.disabled)if(h.on.keydown=function(e){var n=e.keyCode;if(!([37,38,39,40,13,9,27].indexOf(n)<0)){var o=e.target,s=t.$refs.menus[r],a=s.querySelectorAll("[tabindex='-1']"),l=Array.prototype.indexOf.call(a,o),u=void 0;if([38,40].indexOf(n)>-1)38===n?u=0!==l?l-1:l:40===n&&(u=l!==a.length-1?l+1:l),a[u].focus();else if(37===n){if(0!==r)t.$refs.menus[r-1].querySelector("[aria-expanded=true]").focus()}else if(39===n)i.children&&t.$refs.menus[r+1].querySelectorAll("[tabindex='-1']")[0].focus();else if(13===n){if(!i.children){var c=o.getAttribute("id");s.setAttribute("aria-activedescendant",c),t.select(i,r),t.$nextTick(function(){return t.scrollMenu(t.$refs.menus[r])})}}else 9!==n&&27!==n||t.$emit("closeInside")}},i.children){var d={click:"click",hover:"mouseenter"}[o],p=function(){t.visible&&(t.activeItem(i,r),t.$nextTick(function(){t.scrollMenu(t.$refs.menus[r]),t.scrollMenu(t.$refs.menus[r+1])}))};h.on[d]=p,"mouseenter"===d&&t.changeOnSelect&&(h.on.click=function(){-1!==t.activeValue.indexOf(i.value)&&t.$emit("closeInside",!0)}),h.on.mousedown=function(){t.clicking=!0},h.on.focus=function(){t.clicking?t.clicking=!1:p()}}else h.on.click=function(){t.select(i,r),t.$nextTick(function(){return t.scrollMenu(t.$refs.menus[r])})};return i.disabled||i.children||(l=a+"-"+u,u++),e("li",Ta()([{class:{"el-cascader-menu__item":!0,"el-cascader-menu__item--extensible":i.children,"is-active":i.value===n[r],"is-disabled":i.disabled},ref:i.value===n[r]?"activeItem":null},h,{attrs:{tabindex:i.disabled?null:-1,role:"menuitem","aria-haspopup":!!i.children,"aria-expanded":i.value===n[r],id:l,"aria-owns":i.children?c:null}}]),[e("span",[i.label])])}),p={};s&&(p.minWidth=t.inputWidth+"px");var f="hover"===o&&n.length-1===r,m={on:{}};return f&&(m.on.mousemove=h,p.position="relative"),e("ul",Ta()([{class:{"el-cascader-menu":!0,"el-cascader-menu--flexible":s}},m,{style:p,refInFor:!0,ref:"menus",attrs:{role:"menu",id:a}}]),[d,f?e("svg",{ref:"hoverZone",style:{position:"absolute",top:0,height:"100%",width:"100%",left:0,pointerEvents:"none"}}):null])});return"hover"===o&&this.$nextTick(function(){var e=t.$refs.activeItem;if(e){var n=e.parentElement,i=t.$refs.hoverZone;c={activeMenu:n,activeItem:e,hoverZone:i}}else c={}}),e("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":this.handleMenuEnter,"after-leave":this.handleMenuLeave}},[e("div",{directives:[{name:"show",value:r}],class:["el-cascader-menus el-popper",s],ref:"wrapper"},[e("div",{attrs:{"x-arrow":!0},class:"popper__arrow"}),d])])}},Ul=Object(r.a)(Fl,void 0,void 0,!1,null,null,null);Ul.options.__file="menu.vue";var Yl=Ul.exports,Rl={name:"ElCascader",directives:{Clickoutside:pe},mixins:[{props:{placement:{type:String,default:"bottom-start"},appendToBody:$.props.appendToBody,arrowOffset:$.props.arrowOffset,offset:$.props.offset,boundariesPadding:$.props.boundariesPadding,popperOptions:$.props.popperOptions},methods:$.methods,data:$.data,beforeDestroy:$.beforeDestroy},a,c],inject:{elForm:{default:""},elFormItem:{default:""}},components:{ElInput:M},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[]}},separator:{type:String,default:"/"},placeholder:{type:String,default:function(){return Object(u.b)("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},beforeFilter:{type:Function,default:function(){return function(){}}},hoverThreshold:{type:Number,default:500}},data:function(){return{currentValue:this.value||[],menu:null,debouncedInputChange:function(){},menuVisible:!1,inputHover:!1,inputValue:"",flatOptions:null,id:Object(Y.e)(),needFocus:!0,isOnComposition:!1}},computed:{labelKey:function(){return this.props.label||"label"},valueKey:function(){return this.props.value||"value"},childrenKey:function(){return this.props.children||"children"},disabledKey:function(){return this.props.disabled||"disabled"},currentLabels:function(){var e=this,t=this.options,n=[];return this.currentValue.forEach(function(i){var r=t&&t.filter(function(t){return t[e.valueKey]===i})[0];r&&(n.push(r[e.labelKey]),t=r[e.childrenKey])}),n},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},cascaderSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},cascaderDisabled:function(){return this.disabled||(this.elForm||{}).disabled},readonly:function(){return!this.filterable||!Object(Y.j)()&&!Object(Y.i)()&&!this.menuVisible}},watch:{menuVisible:function(e){this.$refs.input.$refs.input.setAttribute("aria-expanded",e),e?this.showMenu():this.hideMenu(),this.$emit("visible-change",e)},value:function(e){this.currentValue=e},currentValue:function(e){this.dispatch("ElFormItem","el.form.change",[e])},currentLabels:function(e){var t=this.showAllLevels?e.join("/"):e[e.length-1];this.$refs.input.$refs.input.setAttribute("value",t)},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 w.a(Yl).$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.menu.hoverThreshold=this.hoverThreshold,this.popperElm=this.menu.$el,this.menu.$refs.menus[0].setAttribute("id","cascader-menu-"+this.id),this.menu.$on("pick",this.handlePick),this.menu.$on("activeItemChange",this.handleActiveItemChange),this.menu.$on("menuLeave",this.doDestroy),this.menu.$on("closeInside",this.handleClickoutside)},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,this.needFocus?this.$refs.input.focus():this.needFocus=!0},handleActiveItemChange:function(e){var t=this;this.$nextTick(function(e){t.updatePopper()}),this.$emit("active-item-change",e)},handleKeydown:function(e){var t=this,n=e.keyCode;13===n?this.handleClick():40===n?(this.menuVisible=!0,setTimeout(function(){t.popperElm.querySelectorAll(".el-cascader-menu")[0].querySelectorAll("[tabindex='-1']")[0].focus()}),e.stopPropagation(),e.preventDefault()):27!==n&&9!==n||(this.inputValue="",this.menu&&(this.menu.visible=!1))},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:this.$nextTick(this.updatePopper)},handleInputChange:function(e){var t=this;if(this.menuVisible){var n=this.flatOptions;if(!e)return this.menu.options=this.options,void this.$nextTick(this.updatePopper);var i=n.filter(function(n){return n.some(function(n){return new RegExp(Object(Y.d)(e),"i").test(n[t.labelKey])})});i=i.length>0?i.map(function(n){return{__IS__FLAT__OPTIONS:!0,value:n.map(function(e){return e[t.valueKey]}),label:t.renderFilteredOptionLabel(e,n),disabled:n.some(function(e){return e[t.disabledKey]})}}):[{__IS__FLAT__OPTIONS:!0,label:this.t("el.cascader.noMatch"),value:"",disabled:!0}],this.menu.options=i,this.$nextTick(this.updatePopper)}},renderFilteredOptionLabel:function(e,t){var n=this;return t.map(function(t,i){var r=t[n.labelKey],o=r.toLowerCase().indexOf(e.toLowerCase()),s=r.slice(o,e.length+o),a=o>-1?n.highlightKeyword(r,s):r;return 0===i?a:[" "+n.separator+" ",a]})},highlightKeyword:function(e,t){var n=this,i=this._c;return e.split(t).map(function(e,r){return 0===r?e:[i("span",{class:{"el-cascader-menu__item__keyword":!0}},[n._v(t)]),e]})},flattenOptions:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],i=[];return e.forEach(function(e){var r=n.concat(e);e[t.childrenKey]?(t.changeOnSelect&&i.push(r),i=i.concat(t.flattenOptions(e[t.childrenKey],r))):i.push(r)}),i},clearValue:function(e){e.stopPropagation(),this.handlePick([],!0)},handleClickoutside:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.menuVisible&&!e&&(this.needFocus=!1),this.menuVisible=!1},handleClick:function(){this.cascaderDisabled||(this.$refs.input.focus(),this.filterable?this.menuVisible=!0:this.menuVisible=!this.menuVisible)},handleFocus:function(e){this.$emit("focus",e)},handleBlur:function(e){this.$emit("blur",e)},handleComposition:function(e){this.isOnComposition="compositionend"!==e.type}},created:function(){var e=this;this.debouncedInputChange=ae()(this.debounce,function(t){var n=e.beforeFilter(t);n&&n.then?(e.menu.options=[{__IS__FLAT__OPTIONS:!0,label:e.t("el.cascader.loading"),value:"",disabled:!0}],n.then(function(){e.$nextTick(function(){e.handleInputChange(t)})})):!1!==n&&e.$nextTick(function(){e.handleInputChange(t)})})},mounted:function(){this.flatOptions=this.flattenOptions(this.options)}},Bl=Object(r.a)(Rl,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("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.cascaderDisabled},e.cascaderSize?"el-cascader--"+e.cascaderSize:""],on:{click:e.handleClick,mouseenter:function(t){e.inputHover=!0},focus:function(t){e.inputHover=!0},mouseleave:function(t){e.inputHover=!1},blur:function(t){e.inputHover=!1},keydown:e.handleKeydown}},[n("el-input",{ref:"input",class:{"is-focus":e.menuVisible},attrs:{readonly:e.readonly,placeholder:e.currentLabels.length?void 0:e.placeholder,"validate-event":!1,size:e.size,disabled:e.cascaderDisabled},on:{input:e.debouncedInputChange,focus:e.handleFocus,blur:e.handleBlur},nativeOn:{compositionstart:function(t){return e.handleComposition(t)},compositionend:function(t){return e.handleComposition(t)}},model:{value:e.inputValue,callback:function(t){e.inputValue=t},expression:"inputValue"}},[n("template",{slot:"suffix"},[e.clearable&&e.inputHover&&e.currentLabels.length?n("i",{key:"1",staticClass:"el-input__icon el-icon-circle-close el-cascader__clearIcon",on:{click:e.clearValue}}):n("i",{key:"2",staticClass:"el-input__icon el-icon-arrow-down",class:{"is-reverse":e.menuVisible}})])],2),n("span",{directives:[{name:"show",rawName:"v-show",value:""===e.inputValue&&!e.isOnComposition,expression:"inputValue === '' && !isOnComposition"}],staticClass:"el-cascader__label"},[e.showAllLevels?[e._l(e.currentLabels,function(t,i){return[e._v("\n "+e._s(t)+"\n "),i2?parseFloat(e):parseInt(e,10)});if(4===i.length?this._alpha=Math.floor(100*parseFloat(i[3])):3===i.length&&(this._alpha=100),i.length>=3){var r=function(e,t,n){n/=100;var i=t/=100,r=Math.max(n,.01);return t*=(n*=2)<=1?n:2-n,i*=r<=1?r:2-r,{h:e,s:100*(0===n?2*i/(r+i):2*t/(n+t)),v:(n+t)/2*100}}(i[0],i[1],i[2]);n(r.h,r.s,r.v)}}else if(-1!==e.indexOf("hsv")){var o=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===o.length?this._alpha=Math.floor(100*parseFloat(o[3])):3===o.length&&(this._alpha=100),o.length>=3&&n(o[0],o[1],o[2])}else if(-1!==e.indexOf("rgb")){var s=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===s.length?this._alpha=Math.floor(100*parseFloat(s[3])):3===s.length&&(this._alpha=100),s.length>=3){var a=Jl(s[0],s[1],s[2]);n(a.h,a.s,a.v)}}else if(-1!==e.indexOf("#")){var l=e.replace("#","").trim(),u=void 0,c=void 0,h=void 0;3===l.length?(u=Kl(l[0]+l[0]),c=Kl(l[1]+l[1]),h=Kl(l[2]+l[2])):6!==l.length&&8!==l.length||(u=Kl(l.substring(0,2)),c=Kl(l.substring(2,4)),h=Kl(l.substring(4,6))),8===l.length?this._alpha=Math.floor(Kl(l.substring(6))/255*100):3!==l.length&&6!==l.length||(this._alpha=100);var d=Jl(u,c,h);n(d.h,d.s,d.v)}},e.prototype.compare=function(e){return Math.abs(e._hue-this._hue)<2&&Math.abs(e._saturation-this._saturation)<1&&Math.abs(e._value-this._value)<1&&Math.abs(e._alpha-this._alpha)<1},e.prototype.doOnChange=function(){var e=this._hue,t=this._saturation,n=this._value,i=this._alpha,r=this.format;if(this.enableAlpha)switch(r){case"hsl":var o=Wl(e,t/100,n/100);this.value="hsla("+e+", "+Math.round(100*o[1])+"%, "+Math.round(100*o[2])+"%, "+i/100+")";break;case"hsv":this.value="hsva("+e+", "+Math.round(t)+"%, "+Math.round(n)+"%, "+i/100+")";break;default:var s=Xl(e,t,n),a=s.r,l=s.g,u=s.b;this.value="rgba("+a+", "+l+", "+u+", "+i/100+")"}else switch(r){case"hsl":var c=Wl(e,t/100,n/100);this.value="hsl("+e+", "+Math.round(100*c[1])+"%, "+Math.round(100*c[2])+"%)";break;case"hsv":this.value="hsv("+e+", "+Math.round(t)+"%, "+Math.round(n)+"%)";break;case"rgb":var h=Xl(e,t,n),d=h.r,p=h.g,f=h.b;this.value="rgb("+d+", "+p+", "+f+")";break;default:this.value=function(e){var t=e.r,n=e.g,i=e.b,r=function(e){e=Math.min(Math.round(e),255);var t=Math.floor(e/16),n=e%16;return""+(ql[t]||t)+(ql[n]||n)};return isNaN(t)||isNaN(n)||isNaN(i)?"":"#"+r(t)+r(n)+r(i)}(Xl(e,t,n))}},e}(),tu=!1,nu=function(e,t){if(!w.a.prototype.$isServer){var n=function(e){t.drag&&t.drag(e)},i=function e(i){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,tu=!1,t.end&&t.end(i)};e.addEventListener("mousedown",function(e){tu||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",n),document.addEventListener("mouseup",i),tu=!0,t.start&&t.start(e))})}},iu={name:"el-sl-panel",props:{color:{required:!0}},computed:{colorValue:function(){return{hue:this.color.get("hue"),value:this.color.get("value")}}},watch:{colorValue:function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),n=this.$el,i=n.clientWidth,r=n.clientHeight;this.cursorLeft=e*i/100,this.cursorTop=(100-t)*r/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),n=e.clientX-t.left,i=e.clientY-t.top;n=Math.max(0,n),n=Math.min(n,t.width),i=Math.max(0,i),i=Math.min(i,t.height),this.cursorLeft=n,this.cursorTop=i,this.color.set({saturation:n/t.width*100,value:100-i/t.height*100})}},mounted:function(){var e=this;nu(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%)"}}},ru=Object(r.a)(iu,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-svpanel",style:{backgroundColor:this.background}},[t("div",{staticClass:"el-color-svpanel__white"}),t("div",{staticClass:"el-color-svpanel__black"}),t("div",{staticClass:"el-color-svpanel__cursor",style:{top:this.cursorTop+"px",left:this.cursorLeft+"px"}},[t("div")])])},[],!1,null,null,null);ru.options.__file="sv-panel.vue";var ou=ru.exports,su={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},computed:{hueValue:function(){return this.color.get("hue")}},watch:{hueValue:function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),n=this.$refs.thumb,i=void 0;if(this.vertical){var r=e.clientY-t.top;r=Math.min(r,t.height-n.offsetHeight/2),r=Math.max(n.offsetHeight/2,r),i=Math.round((r-n.offsetHeight/2)/(t.height-n.offsetHeight)*360)}else{var o=e.clientX-t.left;o=Math.min(o,t.width-n.offsetWidth/2),o=Math.max(n.offsetWidth/2,o),i=Math.round((o-n.offsetWidth/2)/(t.width-n.offsetWidth)*360)}this.color.set("hue",i)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var n=this.$refs.thumb;return Math.round(t*(e.offsetWidth-n.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var n=this.$refs.thumb;return Math.round(t*(e.offsetHeight-n.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var e=this,t=this.$refs,n=t.bar,i=t.thumb,r={drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}};nu(n,r),nu(i,r),this.update()}},au=Object(r.a)(su,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);au.options.__file="hue-slider.vue";var lu=au.exports,uu={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;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),n=this.$refs.thumb;if(this.vertical){var i=e.clientY-t.top;i=Math.max(n.offsetHeight/2,i),i=Math.min(i,t.height-n.offsetHeight/2),this.color.set("alpha",Math.round((i-n.offsetHeight/2)/(t.height-n.offsetHeight)*100))}else{var r=e.clientX-t.left;r=Math.max(n.offsetWidth/2,r),r=Math.min(r,t.width-n.offsetWidth/2),this.color.set("alpha",Math.round((r-n.offsetWidth/2)/(t.width-n.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var n=this.$refs.thumb;return Math.round(t*(e.offsetWidth-n.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var n=this.$refs.thumb;return Math.round(t*(e.offsetHeight-n.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,n=e.g,i=e.b;return"linear-gradient(to right, rgba("+t+", "+n+", "+i+", 0) 0%, rgba("+t+", "+n+", "+i+", 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,n=t.bar,i=t.thumb,r={drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}};nu(n,r),nu(i,r),this.update()}},cu=Object(r.a)(uu,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:this.background},on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);cu.options.__file="alpha-slider.vue";var hu=cu.exports,du={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(e){this.color.fromString(this.colors[e])},parseColors:function(e,t){return e.map(function(e){var n=new eu;return n.enableAlpha=!0,n.format="rgba",n.fromString(e),n.selected=n.value===t.value,n})}},watch:{"$parent.currentColor":function(e){var t=new eu;t.fromString(e),this.rgbaColors.forEach(function(e){e.selected=t.compare(e)})},colors:function(e){this.rgbaColors=this.parseColors(e,this.color)},color:function(e){this.rgbaColors=this.parseColors(this.colors,e)}}},pu=Object(r.a)(du,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-color-predefine"},[n("div",{staticClass:"el-color-predefine__colors"},e._l(e.rgbaColors,function(t,i){return n("div",{key:e.colors[i],staticClass:"el-color-predefine__color-selector",class:{selected:t.selected,"is-alpha":t._alpha<100},on:{click:function(t){e.handleSelect(i)}}},[n("div",{style:{"background-color":t.value}})])}),0)])},[],!1,null,null,null);pu.options.__file="predefine.vue";var fu=pu.exports,mu={name:"el-color-picker-dropdown",mixins:[$,c],components:{SvPanel:ou,HueSlider:lu,AlphaSlider:hu,ElInput:M,ElButton:ze,Predefine:fu},props:{color:{required:!0},showAlpha:Boolean,predefine:Array},data:function(){return{customInput:""}},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")},handleConfirm:function(){this.color.fromString(this.customInput)}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var t=this;!0===e&&this.$nextTick(function(){var e=t.$refs,n=e.sl,i=e.hue,r=e.alpha;n&&n.update(),i&&i.update(),r&&r.update()})},currentColor:{immediate:!0,handler:function(e){this.customInput=e}}}},gu=Object(r.a)(mu,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[n("div",{staticClass:"el-color-dropdown__main-wrapper"},[n("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:e.color,vertical:""}}),n("sv-panel",{ref:"sl",attrs:{color:e.color}})],1),e.showAlpha?n("alpha-slider",{ref:"alpha",attrs:{color:e.color}}):e._e(),e.predefine?n("predefine",{attrs:{color:e.color,colors:e.predefine}}):e._e(),n("div",{staticClass:"el-color-dropdown__btns"},[n("span",{staticClass:"el-color-dropdown__value"},[n("el-input",{attrs:{"validate-event":!1,size:"mini"},on:{blur:e.handleConfirm},nativeOn:{keyup:function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?e.handleConfirm(t):null}},model:{value:e.customInput,callback:function(t){e.customInput=t},expression:"customInput"}})],1),n("el-button",{staticClass:"el-color-dropdown__link-btn",attrs:{size:"mini",type:"text"},on:{click:function(t){e.$emit("clear")}}},[e._v("\n "+e._s(e.t("el.colorpicker.clear"))+"\n ")]),n("el-button",{staticClass:"el-color-dropdown__btn",attrs:{plain:"",size:"mini"},on:{click:e.confirmValue}},[e._v("\n "+e._s(e.t("el.colorpicker.confirm"))+"\n ")])],1)],1)])},[],!1,null,null,null);gu.options.__file="picker-dropdown.vue";var vu=gu.exports,yu={name:"ElColorPicker",mixins:[a],props:{value:String,showAlpha:Boolean,colorFormat:String,disabled:Boolean,size:String,popperClass:String,predefine:Array},inject:{elForm:{default:""},elFormItem:{default:""}},directives:{Clickoutside:pe},computed:{displayedColor:function(){return this.value||this.showPanelColor?this.displayedRgb(this.color,this.showAlpha):"transparent"},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},colorSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},colorDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){e?e&&e!==this.color.value&&this.color.fromString(e):this.showPanelColor=!1},color:{deep:!0,handler:function(){this.showPanelColor=!0}},displayedColor:function(e){if(this.showPicker){var t=new eu({enableAlpha:this.showAlpha,format:this.colorFormat});t.fromString(this.value),e!==this.displayedRgb(t,this.showAlpha)&&this.$emit("active-change",e)}}},methods:{handleTrigger:function(){this.colorDisabled||(this.showPicker=!this.showPicker)},confirmValue:function(){var e=this.color.value;this.$emit("input",e),this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),null!==this.value&&this.dispatch("ElFormItem","el.form.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})},displayedRgb:function(e,t){if(!(e instanceof eu))throw Error("color should be instance of Color Class");var n=e.toRgb(),i=n.r,r=n.g,o=n.b;return t?"rgba("+i+", "+r+", "+o+", "+e.get("alpha")/100+")":"rgb("+i+", "+r+", "+o+")"}},mounted:function(){var e=this.value;e&&this.color.fromString(e),this.popperElm=this.$refs.dropdown.$el},data:function(){return{color:new eu({enableAlpha:this.showAlpha,format:this.colorFormat}),showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:vu}},bu=Object(r.a)(yu,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.hide,expression:"hide"}],class:["el-color-picker",e.colorDisabled?"is-disabled":"",e.colorSize?"el-color-picker--"+e.colorSize:""]},[e.colorDisabled?n("div",{staticClass:"el-color-picker__mask"}):e._e(),n("div",{staticClass:"el-color-picker__trigger",on:{click:e.handleTrigger}},[n("span",{staticClass:"el-color-picker__color",class:{"is-alpha":e.showAlpha}},[n("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:e.displayedColor}}),e.value||e.showPanelColor?e._e():n("span",{staticClass:"el-color-picker__empty el-icon-close"})]),n("span",{directives:[{name:"show",rawName:"v-show",value:e.value||e.showPanelColor,expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down"})]),n("picker-dropdown",{ref:"dropdown",class:["el-color-picker__panel",e.popperClass||""],attrs:{color:e.color,"show-alpha":e.showAlpha,predefine:e.predefine},on:{pick:e.confirmValue,clear:e.clearValue},model:{value:e.showPicker,callback:function(t){e.showPicker=t},expression:"showPicker"}})],1)},[],!1,null,null,null);bu.options.__file="main.vue";var Mu=bu.exports;Mu.install=function(e){e.component(Mu.name,Mu)};var wu=Mu,Cu={mixins:[c],name:"ElTransferPanel",componentName:"ElTransferPanel",components:{ElCheckboxGroup:sn,ElCheckbox:Kt,ElInput:M,OptionContent:{props:{option:Object},render:function(e){var t=function e(t){return"ElTransferPanel"===t.$options.componentName?t:t.$parent?e(t.$parent):t}(this),n=t.$parent||t;return t.renderContent?t.renderContent(e,this.option):n.$scopedSlots.default?n.$scopedSlots.default({option:this.option}):e("span",[this.option[t.labelProp]||this.option[t.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,checkChangeByUser:!0}},watch:{checked:function(e,t){if(this.updateAllChecked(),this.checkChangeByUser){var n=e.concat(t).filter(function(n){return-1===e.indexOf(n)||-1===t.indexOf(n)});this.$emit("checked-change",e,n)}else this.$emit("checked-change",e),this.checkChangeByUser=!0},data:function(){var e=this,t=[],n=this.filteredData.map(function(t){return t[e.keyProp]});this.checked.forEach(function(e){n.indexOf(e)>-1&&t.push(e)}),this.checkChangeByUser=!1,this.checked=t},checkableData:function(){this.updateAllChecked()},defaultChecked:{immediate:!0,handler:function(e,t){var n=this;if(!t||e.length!==t.length||!e.every(function(e){return t.indexOf(e)>-1})){var i=[],r=this.checkableData.map(function(e){return e[n.keyProp]});e.forEach(function(e){r.indexOf(e)>-1&&i.push(e)}),this.checkChangeByUser=!1,this.checked=i}}}},computed:{filteredData:function(){var e=this;return this.data.filter(function(t){return"function"==typeof e.filterMethod?e.filterMethod(e.query,t):(t[e.labelProp]||t[e.keyProp].toString()).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,n=this.format,i=n.noChecked,r=n.hasChecked;return i&&r?e>0?r.replace(/\${checked}/g,e).replace(/\${total}/g,t):i.replace(/\${total}/g,t):e+"/"+t},isIndeterminate:function(){var e=this.checked.length;return e>0&&e0&&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"},hasFooter:function(){return!!this.$slots.default}},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?this.checkableData.map(function(e){return e[t.keyProp]}):[]},clearQuery:function(){"circle-close"===this.inputIcon&&(this.query="")}}},xu=Object(r.a)(Cu,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-transfer-panel"},[n("p",{staticClass:"el-transfer-panel__header"},[n("el-checkbox",{attrs:{indeterminate:e.isIndeterminate},on:{change:e.handleAllCheckedChange},model:{value:e.allChecked,callback:function(t){e.allChecked=t},expression:"allChecked"}},[e._v("\n "+e._s(e.title)+"\n "),n("span",[e._v(e._s(e.checkedSummary))])])],1),n("div",{class:["el-transfer-panel__body",e.hasFooter?"is-with-footer":""]},[e.filterable?n("el-input",{staticClass:"el-transfer-panel__filter",attrs:{size:"small",placeholder:e.placeholder},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"}},[n("i",{class:["el-input__icon","el-icon-"+e.inputIcon],attrs:{slot:"prefix"},on:{click:e.clearQuery},slot:"prefix"})]):e._e(),n("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 n("el-checkbox",{key:t[e.keyProp],staticClass:"el-transfer-panel__item",attrs:{label:t[e.keyProp],disabled:t[e.disabledProp]}},[n("option-content",{attrs:{option:t}})],1)}),1),n("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")))]),n("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),e.hasFooter?n("p",{staticClass:"el-transfer-panel__footer"},[e._t("default")],2):e._e()])},[],!1,null,null,null);xu.options.__file="transfer-panel.vue";var Nu={name:"ElTransfer",mixins:[a,c,h],components:{TransferPanel:xu.exports,ElButton:ze},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[]}},format:{type:Object,default:function(){return{}}},filterable:Boolean,props:{type:Object,default:function(){return{label:"label",key:"key",disabled:"disabled"}}},targetOrder:{type:String,default:"original"}},data:function(){return{leftChecked:[],rightChecked:[]}},computed:{dataObj:function(){var e=this.props.key;return this.data.reduce(function(t,n){return(t[n[e]]=n)&&t},{})},sourceData:function(){var e=this;return this.data.filter(function(t){return-1===e.value.indexOf(t[e.props.key])})},targetData:function(){var e=this;return"original"===this.targetOrder?this.data.filter(function(t){return e.value.indexOf(t[e.props.key])>-1}):this.value.reduce(function(t,n){var i=e.dataObj[n];return i&&t.push(i),t},[])},hasButtonTexts:function(){return 2===this.buttonTexts.length}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}},methods:{getMigratingConfig:function(){return{props:{"footer-format":"footer-format is renamed to format."}}},onSourceCheckedChange:function(e,t){this.leftChecked=e,void 0!==t&&this.$emit("left-check-change",e,t)},onTargetCheckedChange:function(e,t){this.rightChecked=e,void 0!==t&&this.$emit("right-check-change",e,t)},addToLeft:function(){var e=this.value.slice();this.rightChecked.forEach(function(t){var n=e.indexOf(t);n>-1&&e.splice(n,1)}),this.$emit("input",e),this.$emit("change",e,"left",this.rightChecked)},addToRight:function(){var e=this,t=this.value.slice(),n=[],i=this.props.key;this.data.forEach(function(t){var r=t[i];e.leftChecked.indexOf(r)>-1&&-1===e.value.indexOf(r)&&n.push(r)}),t="unshift"===this.targetOrder?n.concat(t):t.concat(n),this.$emit("input",t),this.$emit("change",t,"right",this.leftChecked)},clearQuery:function(e){"left"===e?this.$refs.leftPanel.query="":"right"===e&&(this.$refs.rightPanel.query="")}}},Du=Object(r.a)(Nu,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-transfer"},[n("transfer-panel",e._b({ref:"leftPanel",attrs:{data:e.sourceData,title:e.titles[0]||e.t("el.transfer.titles.0"),"default-checked":e.leftDefaultChecked,placeholder:e.filterPlaceholder||e.t("el.transfer.filterPlaceholder")},on:{"checked-change":e.onSourceCheckedChange}},"transfer-panel",e.$props,!1),[e._t("left-footer")],2),n("div",{staticClass:"el-transfer__buttons"},[n("el-button",{class:["el-transfer__button",e.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===e.rightChecked.length},nativeOn:{click:function(t){return e.addToLeft(t)}}},[n("i",{staticClass:"el-icon-arrow-left"}),void 0!==e.buttonTexts[0]?n("span",[e._v(e._s(e.buttonTexts[0]))]):e._e()]),n("el-button",{class:["el-transfer__button",e.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===e.leftChecked.length},nativeOn:{click:function(t){return e.addToRight(t)}}},[void 0!==e.buttonTexts[1]?n("span",[e._v(e._s(e.buttonTexts[1]))]):e._e(),n("i",{staticClass:"el-icon-arrow-right"})])],1),n("transfer-panel",e._b({ref:"rightPanel",attrs:{data:e.targetData,title:e.titles[1]||e.t("el.transfer.titles.1"),"default-checked":e.rightDefaultChecked,placeholder:e.filterPlaceholder||e.t("el.transfer.filterPlaceholder")},on:{"checked-change":e.onTargetCheckedChange}},"transfer-panel",e.$props,!1),[e._t("right-footer")],2)],1)},[],!1,null,null,null);Du.options.__file="main.vue";var _u=Du.exports;_u.install=function(e){e.component(_u.name,_u)};var Iu=_u,ku={name:"ElContainer",componentName:"ElContainer",props:{direction:String},computed:{isVertical:function(){return"vertical"===this.direction||"horizontal"!==this.direction&&(!(!this.$slots||!this.$slots.default)&&this.$slots.default.some(function(e){var t=e.componentOptions&&e.componentOptions.tag;return"el-header"===t||"el-footer"===t}))}}},ju=Object(r.a)(ku,function(){var e=this.$createElement;return(this._self._c||e)("section",{staticClass:"el-container",class:{"is-vertical":this.isVertical}},[this._t("default")],2)},[],!1,null,null,null);ju.options.__file="main.vue";var Tu=ju.exports;Tu.install=function(e){e.component(Tu.name,Tu)};var Su=Tu,Lu={name:"ElHeader",componentName:"ElHeader",props:{height:{type:String,default:"60px"}}},Ou=Object(r.a)(Lu,function(){var e=this.$createElement;return(this._self._c||e)("header",{staticClass:"el-header",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);Ou.options.__file="main.vue";var Au=Ou.exports;Au.install=function(e){e.component(Au.name,Au)};var Eu=Au,zu={name:"ElAside",componentName:"ElAside",props:{width:{type:String,default:"300px"}}},$u=Object(r.a)(zu,function(){var e=this.$createElement;return(this._self._c||e)("aside",{staticClass:"el-aside",style:{width:this.width}},[this._t("default")],2)},[],!1,null,null,null);$u.options.__file="main.vue";var Pu=$u.exports;Pu.install=function(e){e.component(Pu.name,Pu)};var Fu=Pu,Uu={name:"ElMain",componentName:"ElMain"},Yu=Object(r.a)(Uu,function(){var e=this.$createElement;return(this._self._c||e)("main",{staticClass:"el-main"},[this._t("default")],2)},[],!1,null,null,null);Yu.options.__file="main.vue";var Ru=Yu.exports;Ru.install=function(e){e.component(Ru.name,Ru)};var Bu=Ru,Qu={name:"ElFooter",componentName:"ElFooter",props:{height:{type:String,default:"60px"}}},Vu=Object(r.a)(Qu,function(){var e=this.$createElement;return(this._self._c||e)("footer",{staticClass:"el-footer",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);Vu.options.__file="main.vue";var Hu=Vu.exports;Hu.install=function(e){e.component(Hu.name,Hu)};var Wu=Hu,Gu=[we,De,Le,Qe,Ge,Je,ct,vt,Dt,jt,M,At,Pt,Bt,Wt,Kt,tn,sn,cn,ye,be,fn,ze,Ue,qn,ii,xr,Sr,Ur,Wr,wt,go,Mo,No,es,hs,ms,q,Ls,$s,ea,ga,ya,wa,Ua,Da,Qa,rl,ll,dl,gl,Ml,_l,oe,Tl,Al,Pl,Vl,wu,Iu,Su,Eu,Fu,Bu,Wu,dt],qu=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};u.a.use(t.locale),u.a.i18n(t.i18n),Gu.forEach(function(t){e.component(t.name,t)}),e.use(da.directive),e.prototype.$ELEMENT={size:t.size||"",zIndex:t.zIndex||2e3},e.prototype.$loading=da.service,e.prototype.$msgbox=ho,e.prototype.$alert=ho.alert,e.prototype.$confirm=ho.confirm,e.prototype.$prompt=ho.prompt,e.prototype.$notify=Ws,e.prototype.$message=el};"undefined"!=typeof window&&window.Vue&&qu(window.Vue);t.default={version:"2.5.1",locale:u.a.use,i18n:u.a.i18n,install:qu,CollapseTransition:dt,Loading:da,Pagination:we,Dialog:De,Autocomplete:Le,Dropdown:Qe,DropdownMenu:Ge,DropdownItem:Je,Menu:ct,Submenu:vt,MenuItem:Dt,MenuItemGroup:jt,Input:M,InputNumber:At,Radio:Pt,RadioGroup:Bt,RadioButton:Wt,Checkbox:Kt,CheckboxButton:tn,CheckboxGroup:sn,Switch:cn,Select:ye,Option:be,OptionGroup:fn,Button:ze,ButtonGroup:Ue,Table:qn,TableColumn:ii,DatePicker:xr,TimeSelect:Sr,TimePicker:Ur,Popover:Wr,Tooltip:wt,MessageBox:ho,Breadcrumb:go,BreadcrumbItem:Mo,Form:No,FormItem:es,Tabs:hs,TabPane:ms,Tag:q,Tree:Ls,Alert:$s,Notification:Ws,Slider:ea,Icon:ga,Row:ya,Col:wa,Upload:Ua,Progress:Da,Spinner:Qa,Message:el,Badge:rl,Card:ll,Rate:dl,Steps:gl,Step:Ml,Carousel:_l,Scrollbar:oe,CarouselItem:Tl,Collapse:Al,CollapseItem:Pl,Cascader:Vl,ColorPicker:wu,Transfer:Iu,Container:Su,Header:Eu,Aside:Fu,Main:Bu,Footer:Wu}},function(e,t){var n=e.exports={version:"2.6.2"};"number"==typeof __e&&(__e=n)},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t,n){var i;!function(r){"use strict";var o={},s=/d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,a=/\d\d?/,l=/[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i,u=function(){};function c(e,t){for(var n=[],i=0,r=e.length;i3?0:(e-e%10!=10)*e%10]}};var v={D:function(e){return e.getDay()},DD:function(e){return d(e.getDay())},Do:function(e,t){return t.DoFn(e.getDate())},d:function(e){return e.getDate()},dd:function(e){return d(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 d(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 d(e.getHours()%12||12)},H:function(e){return e.getHours()},HH:function(e){return d(e.getHours())},m:function(e){return e.getMinutes()},mm:function(e){return d(e.getMinutes())},s:function(e){return e.getSeconds()},ss:function(e){return d(e.getSeconds())},S:function(e){return Math.round(e.getMilliseconds()/100)},SS:function(e){return d(Math.round(e.getMilliseconds()/10),2)},SSS:function(e){return d(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?"-":"+")+d(100*Math.floor(Math.abs(t)/60)+Math.abs(t)%60,4)}},y={d:[a,function(e,t){e.day=t}],M:[a,function(e,t){e.month=t-1}],yy:[a,function(e,t){var n=+(""+(new Date).getFullYear()).substr(0,2);e.year=""+(t>68?n-1:n)+t}],h:[a,function(e,t){e.hour=t}],m:[a,function(e,t){e.minute=t}],s:[a,function(e,t){e.second=t}],yyyy:[/\d{4}/,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{3}/,function(e,t){e.millisecond=t}],D:[a,u],ddd:[l,u],MMM:[l,h("monthNamesShort")],MMMM:[l,h("monthNames")],a:[l,function(e,t,n){var i=t.toLowerCase();i===n.amPm[0]?e.isPm=!1:i===n.amPm[1]&&(e.isPm=!0)}],ZZ:[/[\+\-]\d\d:?\d\d/,function(e,t){var n,i=(t+"").match(/([\+\-]|\d\d)/gi);i&&(n=60*i[1]+parseInt(i[2],10),e.timezoneOffset="+"===i[0]?n:-n)}]};y.DD=y.D,y.dddd=y.ddd,y.Do=y.dd=y.d,y.mm=y.m,y.hh=y.H=y.HH=y.h,y.MM=y.M,y.ss=y.s,y.A=y.a,o.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"},o.format=function(e,t,n){var i=n||o.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=o.masks[t]||t||o.masks.default).replace(s,function(t){return t in v?v[t](e,i):t.slice(1,t.length-1)})},o.parse=function(e,t,n){var i=n||o.i18n;if("string"!=typeof t)throw new Error("Invalid format in fecha.parse");if(t=o.masks[t]||t,e.length>1e3)return!1;var r=!0,a={};if(t.replace(s,function(t){if(y[t]){var n=y[t],o=e.search(n[0]);~o?e.replace(n[0],function(t){return n[1](a,t,i),e=e.substr(o+t.length),t}):r=!1}return y[t]?"":t.slice(1,t.length-1)}),!r)return!1;var l,u=new Date;return!0===a.isPm&&null!=a.hour&&12!=+a.hour?a.hour=+a.hour+12:!1===a.isPm&&12==+a.hour&&(a.hour=0),null!=a.timezoneOffset?(a.minute=+(a.minute||0)-+a.timezoneOffset,l=new Date(Date.UTC(a.year||u.getFullYear(),a.month||0,a.day||1,a.hour||0,a.minute||0,a.second||0,a.millisecond||0))):l=new Date(a.year||u.getFullYear(),a.month||0,a.day||1,a.hour||0,a.minute||0,a.second||0,a.millisecond||0),l},e.exports?e.exports=o:void 0===(i=function(){return o}.call(t,n,t,e))||(e.exports=i)}()},function(e,t){var n=/^(attrs|props|on|nativeOn|class|style|hook)$/;function i(e,t){return function(){e&&e.apply(this,arguments),t&&t.apply(this,arguments)}}e.exports=function(e){return e.reduce(function(e,t){var r,o,s,a,l;for(s in t)if(r=e[s],o=t[s],r&&n.test(s))if("class"===s&&("string"==typeof r&&(l=r,e[s]=r={},r[l]=!0),"string"==typeof o&&(l=o,t[s]=o={},o[l]=!0)),"on"===s||"nativeOn"===s||"hook"===s)for(a in o)r[a]=i(r[a],o[a]);else if(Array.isArray(r))e[s]=r.concat(o);else if(Array.isArray(o))e[s]=[r].concat(o);else for(a in o)r[a]=o[a];else e[s]=t[s];return e},{})}},function(e,t,n){var i=n(19);e.exports=function(e){if(!i(e))throw TypeError(e+" is not an object!");return e}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,n){var i=n(51),r=n(38);e.exports=Object.keys||function(e){return i(e,r)}},function(e,t){e.exports=!0},function(e,t){var n=0,i=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++n+i).toString(36))}},function(e,t){t.f={}.propertyIsEnumerable},function(e,t){e.exports=function(e,t,n,i){var r,o=0;return"boolean"!=typeof t&&(i=n,n=t,t=void 0),function(){var s=this,a=Number(new Date)-o,l=arguments;function u(){o=Number(new Date),n.apply(s,l)}i&&!r&&u(),r&&clearTimeout(r),void 0===i&&a>e?u():!0!==t&&(r=setTimeout(i?function(){r=void 0}:u,void 0===i?e-a:e))}}},function(e,t){e.exports=function(e){return JSON.parse(JSON.stringify(e))}},function(e){e.exports=[{lang:"zh-CN","demo-block":{"hide-text":"隐藏代码","show-text":"显示代码","button-text":"在线运行","tooltip-text":"前往 jsfiddle.net 运行此示例"},footer:{links:"链接",repo:"代码仓库",community:"社区",changelog:"更新日志",theme:"自定义主题工具",preview:"在线主题生成",faq:"常见问题",gitter:"在线讨论",starter:"脚手架",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:{links:"Links",repo:"GitHub",community:"Community",changelog:"Changelog",theme:"Theme CLI tool",preview:"Online theme generator",faq:"FAQ",gitter:"Gitter",starter:"Starter kit",feedback:"Feedback",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Component",resource:"Resource"},nav:{dropdown:"Version: "}},{lang:"es","demo-block":{"hide-text":"Ocultar","show-text":"Mostrar","button-text":"Probar","tooltip-text":"Prueba este ejemplo en jsfiddle.net"},footer:{links:"Enlaces",repo:"GitHub",community:"Comunidad",changelog:"Lista de cambios",theme:"Generador de temas por CLI",preview:"Generador de temas en línea",faq:"FAQ",gitter:"Gitter",starter:"Kit de inicio",feedback:"Comentarios",contribution:"Contribución",eleme:"Eleme"},header:{guide:"Guía",components:"Componentes",resource:"Recursos"},nav:{dropdown:"Versión: "}}]},function(e,t,n){var i=n(7),r=n(18),o=n(84),s=n(10),a=n(8),l=function(e,t,n){var u,c,h,d=e&l.F,p=e&l.G,f=e&l.S,m=e&l.P,g=e&l.B,v=e&l.W,y=p?r:r[t]||(r[t]={}),b=y.prototype,M=p?i:f?i[t]:(i[t]||{}).prototype;for(u in p&&(n=t),n)(c=!d&&M&&void 0!==M[u])&&a(y,u)||(h=c?M[u]:n[u],y[u]=p&&"function"!=typeof M[u]?n[u]:g&&c?o(h,i):v&&M[u]==h?function(e){var t=function(t,n,i){if(this instanceof e){switch(arguments.length){case 0:return new e;case 1:return new e(t);case 2:return new e(t,n)}return new e(t,n,i)}return e.apply(this,arguments)};return t.prototype=e.prototype,t}(h):m&&"function"==typeof h?o(Function.call,h):h,m&&((y.virtual||(y.virtual={}))[u]=h,e&l.R&&b&&!b[u]&&s(b,u,h)))};l.F=1,l.G=2,l.S=4,l.P=8,l.B=16,l.W=32,l.U=64,l.R=128,e.exports=l},function(e,t,n){var i=n(19);e.exports=function(e,t){if(!i(e))return e;var n,r;if(t&&"function"==typeof(n=e.toString)&&!i(r=n.call(e)))return r;if("function"==typeof(n=e.valueOf)&&!i(r=n.call(e)))return r;if(!t&&"function"==typeof(n=e.toString)&&!i(r=n.call(e)))return r;throw TypeError("Can't convert object to primitive value")}},function(e,t){e.exports=function(e){if(null==e)throw TypeError("Can't call method on "+e);return e}},function(e,t){var n=Math.ceil,i=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?i:n)(e)}},function(e,t,n){var i=n(37)("keys"),r=n(27);e.exports=function(e){return i[e]||(i[e]=r(e))}},function(e,t,n){var i=n(18),r=n(7),o=r["__core-js_shared__"]||(r["__core-js_shared__"]={});(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:i.version,mode:n(26)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t){e.exports={}},function(e,t,n){var i=n(11).f,r=n(8),o=n(14)("toStringTag");e.exports=function(e,t,n){e&&!r(e=n?e:e.prototype,o)&&i(e,o,{configurable:!0,value:t})}},function(e,t,n){t.f=n(14)},function(e,t,n){var i=n(7),r=n(18),o=n(26),s=n(42),a=n(11).f;e.exports=function(e){var t=r.Symbol||(r.Symbol=o?{}:i.Symbol||{});"_"==e.charAt(0)||e in t||a(t,e,{value:s.f(e)})}},function(e,t,n){"use strict";t.a={el:{colorpicker:{confirm:"确定",clear:"清空"},datepicker:{now:"此刻",today:"今天",cancel:"取消",clear:"清空",confirm:"确定",selectDate:"选择日期",selectTime:"选择时间",startDate:"开始日期",startTime:"开始时间",endDate:"结束日期",endTime:"结束时间",prevYear:"前一年",nextYear:"后一年",prevMonth:"上个月",nextMonth:"下个月",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:"无匹配数据",loading:"加载中",placeholder:"请选择"},pagination:{goto:"前往",pagesize:"条/页",total:"共 {total} 条",pageClassifier:"页"},messagebox:{title:"提示",confirm:"确定",cancel:"取消",error:"输入的数据不合法!"},upload:{deleteTip:"按 delete 键可删除",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){var n,i,r=e.exports={};function o(){throw new Error("setTimeout has not been defined")}function s(){throw new Error("clearTimeout has not been defined")}function a(e){if(n===setTimeout)return setTimeout(e,0);if((n===o||!n)&&setTimeout)return n=setTimeout,setTimeout(e,0);try{return n(e,0)}catch(t){try{return n.call(null,e,0)}catch(t){return n.call(this,e,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:o}catch(e){n=o}try{i="function"==typeof clearTimeout?clearTimeout:s}catch(e){i=s}}();var l,u=[],c=!1,h=-1;function d(){c&&l&&(c=!1,l.length?u=l.concat(u):h=-1,u.length&&p())}function p(){if(!c){var e=a(d);c=!0;for(var t=u.length;t;){for(l=u,u=[];++h1)for(var n=1;n was loaded but did not call our provided callback"),JSONPScriptError:o("JSONPScriptError"," +
+ + + diff --git a/2.5/static/component.bd3411b.png b/2.5/static/component.bd3411b.png new file mode 100644 index 000000000..ebd183078 Binary files /dev/null and b/2.5/static/component.bd3411b.png differ diff --git a/2.5/static/element-icons.6f0a763.ttf b/2.5/static/element-icons.6f0a763.ttf new file mode 100644 index 000000000..73bc90f4a Binary files /dev/null and b/2.5/static/element-icons.6f0a763.ttf differ diff --git a/2.5/static/guide.0a8462c.png b/2.5/static/guide.0a8462c.png new file mode 100644 index 000000000..78748298c Binary files /dev/null and b/2.5/static/guide.0a8462c.png differ diff --git a/2.5/static/hamburger.50e4091.png b/2.5/static/hamburger.50e4091.png new file mode 100644 index 000000000..b31a246d6 Binary files /dev/null and b/2.5/static/hamburger.50e4091.png differ diff --git a/2.5/static/navbar_0.b608f86.png b/2.5/static/navbar_0.b608f86.png new file mode 100644 index 000000000..5fbe864fb Binary files /dev/null and b/2.5/static/navbar_0.b608f86.png differ diff --git a/2.5/static/navbar_1.499e088.png b/2.5/static/navbar_1.499e088.png new file mode 100644 index 000000000..3137e4848 Binary files /dev/null and b/2.5/static/navbar_1.499e088.png differ diff --git a/2.5/static/navbar_2.59ecae2.png b/2.5/static/navbar_2.59ecae2.png new file mode 100644 index 000000000..e225afa97 Binary files /dev/null and b/2.5/static/navbar_2.59ecae2.png differ diff --git a/2.5/static/navbar_3.8dcec92.png b/2.5/static/navbar_3.8dcec92.png new file mode 100644 index 000000000..42007eae0 Binary files /dev/null and b/2.5/static/navbar_3.8dcec92.png differ diff --git a/2.5/static/plant-1.a9e9851.png b/2.5/static/plant-1.a9e9851.png new file mode 100644 index 000000000..458563ae0 Binary files /dev/null and b/2.5/static/plant-1.a9e9851.png differ diff --git a/2.5/static/qrcode.a88f522.png b/2.5/static/qrcode.a88f522.png new file mode 100644 index 000000000..e921aec03 Binary files /dev/null and b/2.5/static/qrcode.a88f522.png differ diff --git a/2.5/static/resource.a72b8f8.png b/2.5/static/resource.a72b8f8.png new file mode 100644 index 000000000..99756867a Binary files /dev/null and b/2.5/static/resource.a72b8f8.png differ diff --git a/2.5/static/web.61b1f33.png b/2.5/static/web.61b1f33.png new file mode 100644 index 000000000..8f85521d5 Binary files /dev/null and b/2.5/static/web.61b1f33.png differ diff --git a/2.5/versions.json b/2.5/versions.json new file mode 100644 index 000000000..4c1761a8e --- /dev/null +++ b/2.5/versions.json @@ -0,0 +1 @@ +{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.1":"2.5"} \ No newline at end of file diff --git a/2.5/zh-CN.005603c.js b/2.5/zh-CN.005603c.js new file mode 100644 index 000000000..2648bead2 --- /dev/null +++ b/2.5/zh-CN.005603c.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[5],Array(169).concat([function(s,t,a){var e={"./changelog.vue":547,"./component.vue":637,"./design.vue":654,"./guide.vue":635,"./index.vue":634,"./nav.vue":631,"./resource.vue":656};function r(s){var t=l(s);return a(t)}function l(s){var t=e[s];if(!(t+1)){var a=new Error("Cannot find module '"+s+"'");throw a.code="MODULE_NOT_FOUND",a}return t}r.keys=function(){return Object.keys(e)},r.resolve=l,s.exports=r,r.id=169},,,function(s,t,a){var e={"./zh-CN/alert.md":614,"./zh-CN/badge.md":662,"./zh-CN/breadcrumb.md":663,"./zh-CN/button.md":664,"./zh-CN/card.md":610,"./zh-CN/carousel.md":609,"./zh-CN/cascader.md":608,"./zh-CN/checkbox.md":413,"./zh-CN/collapse.md":607,"./zh-CN/color-picker.md":606,"./zh-CN/color.md":665,"./zh-CN/container.md":604,"./zh-CN/custom-theme.md":666,"./zh-CN/date-picker.md":418,"./zh-CN/datetime-picker.md":420,"./zh-CN/dialog.md":422,"./zh-CN/dropdown.md":602,"./zh-CN/form.md":601,"./zh-CN/i18n.md":668,"./zh-CN/icon.md":599,"./zh-CN/input-number.md":645,"./zh-CN/input.md":598,"./zh-CN/installation.md":670,"./zh-CN/layout.md":671,"./zh-CN/loading.md":595,"./zh-CN/menu.md":594,"./zh-CN/message-box.md":593,"./zh-CN/message.md":435,"./zh-CN/notification.md":436,"./zh-CN/pagination.md":592,"./zh-CN/popover.md":591,"./zh-CN/progress.md":672,"./zh-CN/quickstart.md":673,"./zh-CN/radio.md":440,"./zh-CN/rate.md":588,"./zh-CN/select.md":587,"./zh-CN/slider.md":586,"./zh-CN/steps.md":585,"./zh-CN/switch.md":580,"./zh-CN/table.md":579,"./zh-CN/tabs.md":578,"./zh-CN/tag.md":577,"./zh-CN/time-picker.md":576,"./zh-CN/tooltip.md":575,"./zh-CN/transfer.md":574,"./zh-CN/transition.md":450,"./zh-CN/tree.md":573,"./zh-CN/typography.md":677,"./zh-CN/upload.md":571};function r(s){var t=l(s);return a(t)}function l(s){var t=e[s];if(!(t+1)){var a=new Error("Cannot find module '"+s+"'");throw a.code="MODULE_NOT_FOUND",a}return t}r.keys=function(){return Object.keys(e)},r.resolve=l,s.exports=r,r.id=172},,,function(s,t,a){},function(s,t,a){},,,,,function(s,t,a){},function(s,t,a){},,,,,,,,,,,,,,,function(s,t,a){},,,,,function(s,t,a){},,,function(s,t,a){},,,,,,,,,,,,,,,function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){},,function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){"use strict";a.r(t);var e=a(229),r=a.n(e);for(var l in e)"default"!==l&&function(s){a.d(t,s,function(){return e[s]})}(l);t.default=r.a},function(s,t){var a=["上海","北京","广州","深圳"];s.exports={data:function(){return{checkList:["选中且禁用","复选框 A"],checked:!0,checked1:!1,checked2:!0,checked3:!0,checked4:!1,checked5:!1,checked6:!0,isValid:"可用",checkAll:!1,cities:a,checkedCities:["上海","北京"],checkedCities1:["上海","北京"],isIndeterminate:!0,checkboxGroup1:["上海"],checkboxGroup2:["上海"],checkboxGroup3:["上海"],checkboxGroup4:["上海"],checkboxGroup5:[],checkboxGroup6:[]}},methods:{handleChange:function(s){console.log(s)},handleCheckAllChange:function(s){this.checkedCities=s?a:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(s){var t=s.length;this.checkAll=t===this.cities.length,this.isIndeterminate=t>0&&tDate.now()},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:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:"",value14:""}}}},function(s,t,a){},function(s,t,a){"use strict";a.r(t);var e=a(238),r=a.n(e);for(var l in e)"default"!==l&&function(s){a.d(t,s,function(){return e[s]})}(l);t.default=r.a},function(s,t){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:"",value4:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value5:"",value6:"",value7:""}}}},function(s,t,a){},function(s,t,a){"use strict";a.r(t);var e=a(241),r=a.n(e);for(var l in e)"default"!==l&&function(s){a.d(t,s,function(){return e[s]})}(l);t.default=r.a},function(s,t){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,outerVisible:!1,innerVisible:!1,centerDialogVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"80px"}},methods:{handleClose:function(s){this.$confirm("确认关闭？").then(function(t){s()}).catch(function(s){})}}}},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){},,function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){"use strict";a.r(t);var e=a(256),r=a.n(e);for(var l in e)"default"!==l&&function(s){a.d(t,s,function(){return e[s]})}(l);t.default=r.a},function(s,t){s.exports={methods:{open:function(){this.$message("这是一条消息提示")},openVn:function(){var s=this.$createElement;this.$message({message:s("p",null,[s("span",null,"内容可以是 "),s("i",{style:"color: teal"},"VNode")])})},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"})},openCenter:function(){this.$message({message:"居中的文字",center:!0})},openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"这是 HTML 片段"})}}}},function(s,t,a){"use strict";a.r(t);var e=a(258),r=a.n(e);for(var l in e)"default"!==l&&function(s){a.d(t,s,function(){return e[s]})}(l);t.default=r.a},function(s,t){s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"标题名称",message:s("i",{style:"color: teal"},"这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案")})},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({title:"自定义位置",message:"右上角弹出的消息"})},open8:function(){this.$notify({title:"自定义位置",message:"右下角弹出的消息",position:"bottom-right"})},open9:function(){this.$notify({title:"自定义位置",message:"左下角弹出的消息",position:"bottom-left"})},open10:function(){this.$notify({title:"自定义位置",message:"左上角弹出的消息",position:"top-left"})},open11:function(){this.$notify({title:"偏移",message:"这是一条带有偏移的提示消息",offset:100})},open12:function(){this.$notify({title:"HTML 片段",dangerouslyUseHTMLString:!0,message:"这是 HTML 片段"})},open13:function(){this.$notify.success({title:"Info",message:"这是一条没有关闭按钮的消息",showClose:!1})},onClose:function(){console.log("Notification 已关闭")}}}},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){"use strict";a.r(t);var e=a(263),r=a.n(e);for(var l in e)"default"!==l&&function(s){a.d(t,s,function(){return e[s]})}(l);t.default=r.a},function(s,t){s.exports={data:function(){return{radio:"1",radio1:"选中且禁用",radio2:3,radio3:"上海",radio4:"上海",radio5:"上海",radio6:"上海",radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}}},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){"use strict";a.r(t);var e=a(274),r=a.n(e);for(var l in e)"default"!==l&&function(s){a.d(t,s,function(){return e[s]})}(l);t.default=r.a},function(s,t){s.exports={data:function(){return{show:!0,show2:!0,show3:!0}}}},function(s,t,a){},function(s,t,a){},function(s,t,a){},function(s,t,a){},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t,a){"use strict";var e=a(175);a.n(e).a},function(s,t,a){"use strict";var e=a(176);a.n(e).a},function(s,t,a){"use strict";var e=a(181);a.n(e).a},function(s,t,a){"use strict";var e=a(182);a.n(e).a},function(s,t,a){"use strict";var e=a(197);a.n(e).a},function(s,t,a){"use strict";var e=a(202);a.n(e).a},function(s,t,a){"use strict";var e=a(205);a.n(e).a},,,,,,,,,,,,,,,function(s,t,a){"use strict";var e=a(220);a.n(e).a},function(s,t,a){"use strict";var e=a(221);a.n(e).a},function(s,t,a){"use strict";var e=a(222);a.n(e).a},function(s,t,a){"use strict";var e=a(223);a.n(e).a},function(s,t,a){"use strict";var e=a(225);a.n(e).a},function(s,t,a){"use strict";var e=a(226);a.n(e).a},function(s,t,a){"use strict";var e=a(227);a.n(e).a},function(s,t,a){"use strict";a.r(t);var e=a(693),r=a(228);for(var l in r)"default"!==l&&function(s){a.d(t,s,function(){return r[s]})}(l);var n=a(0),v=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);v.options.__file="checkbox.md",t.default=v.exports},function(s,t,a){"use strict";var e=a(230);a.n(e).a},function(s,t,a){"use strict";var e=a(231);a.n(e).a},function(s,t,a){"use strict";var e=a(232);a.n(e).a},function(s,t,a){"use strict";var e=a(233);a.n(e).a},function(s,t,a){"use strict";a.r(t);var e=a(694),r=a(234);for(var l in r)"default"!==l&&function(s){a.d(t,s,function(){return r[s]})}(l);a(419);var n=a(0),v=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);v.options.__file="date-picker.md",t.default=v.exports},function(s,t,a){"use strict";var e=a(236);a.n(e).a},function(s,t,a){"use strict";a.r(t);var e=a(695),r=a(237);for(var l in r)"default"!==l&&function(s){a.d(t,s,function(){return r[s]})}(l);a(421);var n=a(0),v=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);v.options.__file="datetime-picker.md",t.default=v.exports},function(s,t,a){"use strict";var e=a(239);a.n(e).a},function(s,t,a){"use strict";a.r(t);var e=a(696),r=a(240);for(var l in r)"default"!==l&&function(s){a.d(t,s,function(){return r[s]})}(l);a(423);var n=a(0),v=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);v.options.__file="dialog.md",t.default=v.exports},function(s,t,a){"use strict";var e=a(242);a.n(e).a},function(s,t,a){"use strict";var e=a(243);a.n(e).a},function(s,t,a){"use strict";var e=a(244);a.n(e).a},function(s,t,a){"use strict";var e=a(245);a.n(e).a},function(s,t,a){"use strict";var e=a(246);a.n(e).a},function(s,t,a){"use strict";var e=a(247);a.n(e).a},function(s,t,a){"use strict";var e=a(249);a.n(e).a},function(s,t,a){"use strict";var e=a(250);a.n(e).a},function(s,t,a){"use strict";var e=a(251);a.n(e).a},function(s,t,a){"use strict";var e=a(252);a.n(e).a},function(s,t,a){"use strict";var e=a(253);a.n(e).a},function(s,t,a){"use strict";var e=a(254);a.n(e).a},function(s,t,a){"use strict";a.r(t);var e=a(697),r=a(255);for(var l in r)"default"!==l&&function(s){a.d(t,s,function(){return r[s]})}(l);var n=a(0),v=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);v.options.__file="message.md",t.default=v.exports},function(s,t,a){"use strict";a.r(t);var e=a(698),r=a(257);for(var l in r)"default"!==l&&function(s){a.d(t,s,function(){return r[s]})}(l);var n=a(0),v=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);v.options.__file="notification.md",t.default=v.exports},function(s,t,a){"use strict";var e=a(259);a.n(e).a},function(s,t,a){"use strict";var e=a(260);a.n(e).a},function(s,t,a){"use strict";var e=a(261);a.n(e).a},function(s,t,a){"use strict";a.r(t);var e=a(699),r=a(262);for(var l in r)"default"!==l&&function(s){a.d(t,s,function(){return r[s]})}(l);var n=a(0),v=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);v.options.__file="radio.md",t.default=v.exports},function(s,t,a){"use strict";var e=a(264);a.n(e).a},function(s,t,a){"use strict";var e=a(265);a.n(e).a},function(s,t,a){"use strict";var e=a(266);a.n(e).a},function(s,t,a){"use strict";var e=a(267);a.n(e).a},function(s,t,a){"use strict";var e=a(268);a.n(e).a},function(s,t,a){"use strict";var e=a(269);a.n(e).a},function(s,t,a){"use strict";var e=a(270);a.n(e).a},function(s,t,a){"use strict";var e=a(271);a.n(e).a},function(s,t,a){"use strict";var e=a(272);a.n(e).a},function(s,t,a){"use strict";a.r(t);var e=a(689),r=a(273);for(var l in r)"default"!==l&&function(s){a.d(t,s,function(){return r[s]})}(l);a(451);var n=a(0),v=Object(n.a)(r.default,e.a,e.b,!1,null,null,null);v.options.__file="transition.md",t.default=v.exports},function(s,t,a){"use strict";var e=a(275);a.n(e).a},function(s,t,a){"use strict";var e=a(276);a.n(e).a},function(s,t,a){"use strict";var e=a(277);a.n(e).a},function(s,t,a){"use strict";var e=a(278);a.n(e).a},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t,a){"use strict";a.r(t);var e=a(0),r=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[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:"2-5-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.5.0")]),a("p",[a("em",[s._v("2019-01-25")])]),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("DatePicker\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("validate-event")]),s._v(" 属性 (by @ziyoung in #13531)")])])]),a("li",[s._v("DateTimePicker\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("pickerOptions")]),s._v(" 支持 "),a("code",{pre:!0},[s._v("selectableRange")]),s._v(" 选项 (by @eeeeeeeason)")])])]),a("li",[s._v("Tag\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("click")]),s._v(" 事件 (by @licdream in #14106)")])])]),a("li",[s._v("I18n\n"),a("ul",[a("li",[s._v("新增 柯尔克孜语 (Kyrgyz) (by @zzjframework in #14174)")])])])]),a("h4",{attrs:{id:"you-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#you-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 优化")]),a("ul",[a("li",[s._v("升级到 webpack@4 (by @jikkai in #14173)")]),a("li",[s._v("Input\n"),a("ul",[a("li",[s._v("简化内部实现，遵循单向数据流；修复若干相关 Bug (by @wacky6 in #13471)")])])]),a("li",[s._v("更新 Axure 文件，增加新组件 (by @ziyoung in #13773)")])]),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("Autocomplete\n"),a("ul",[a("li",[s._v("修正下拉框最后一行显示不完整的问题 (#13597) (by @ziyoung)")]),a("li",[s._v("修正下拉框箭头 (#13762) (by @liuchuzhang)")])])]),a("li",[s._v("Carousel\n"),a("ul",[a("li",[s._v("组件销毁时释放内部 Timer (#13820) (by @elfman)")])])]),a("li",[s._v("Cascader\n"),a("ul",[a("li",[s._v("移除已废弃的计算属性的 cache 属性 (#13737) (by @iamkun)")]),a("li",[s._v("修正 TypeScript 中 CascaderOption 类型定义 (#13613) (by @NateScarlet)")]),a("li",[s._v("修正图标覆盖文字的问题 (#13596) (by @ziyoung)")])])]),a("li",[s._v("Checkbox\n"),a("ul",[a("li",[s._v("改进显示样式 (by @PanJiaChen)")])])]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("修正 TimeSpinner 中缺失的 v-for "),a("code",{pre:!0},[s._v("key")]),s._v(" 属性 (#13547) (by @Ende93)")]),a("li",[s._v("修正周选择器在跨年时的高亮行为 (#13883) (by @suyi91)")])])]),a("li",[s._v("Input\n"),a("ul",[a("li",[s._v("修复 textarea 时的 DOM 节点引用 (#13803) (by @laomu1988 @island205)")])])]),a("li",[s._v("Pagination\n"),a("ul",[a("li",[s._v("输入框的值不会小于 1 (#13727) (by @elfman)")])])]),a("li",[s._v("Popover\n"),a("ul",[a("li",[s._v("修正 hover 的触发行为 (#13104) (by @goldengecko)")]),a("li",[s._v("修正弹出框的内存泄漏 (#13988) (by @qpxtWhite)")])])]),a("li",[s._v("Radio\n"),a("ul",[a("li",[s._v("改进显示样式 (by @ohhoney1)")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("改进点击排序箭头时的行为 (#12890) (by @ohhoney1)")]),a("li",[s._v("修正 IE10+ 中 “暂无数据” 提示的垂直布局 (#13638) (by @imzjy)")]),a("li",[s._v("修正文档中 "),a("code",{pre:!0},[s._v("index")]),s._v(" 的类型说明 (#13628) (by @ilovefafa)")]),a("li",[s._v("修正多级表头使用 "),a("code",{pre:!0},[s._v("fixed")]),s._v(" 属性时，表尾合计行的显示样式 (#13914) (by @luckyCao)")])])]),a("li",[s._v("Tabs\n"),a("ul",[a("li",[s._v("修正自动滚动 (#13696) (by @iamkun)")]),a("li",[s._v("通过面板名称查找面板 (#13705) (by @iamkun)")]),a("li",[s._v("使用 "),a("code",{pre:!0},[s._v("paneName")]),s._v(" 计算面板样式 (#13733) (by @iamkun)")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[s._v("修正 "),a("code",{pre:!0},[s._v("showCheckbox")]),s._v(" 不能影响子节点的问题 (by @KidneyFlower)")]),a("li",[s._v("更新文档和 TypeScript 定义 (#13540) (by @ziyoung)")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("list-type")]),s._v(" 改变时，保留 "),a("code",{pre:!0},[s._v("url")]),s._v(" 属性 (#13771) (by @elfman)")])])]),a("li",[s._v("Slider\n"),a("ul",[a("li",[s._v("修正源代码缩进 (#13955) (by @wacky6)")])])]),a("li",[s._v("I18n\n"),a("ul",[a("li",[s._v("补充加泰罗尼亚语 (Catalan) 翻译 (by @jaumesala)")]),a("li",[s._v("补充俄语 (Russian) 翻译 (#13658) (by @justlp)")]),a("li",[s._v("补充芬兰语 (Finnish) 翻译 (#14137) (by @jenkrisu)")])])]),a("li",[s._v("Doc\n"),a("ul",[a("li",[s._v("更新西班牙语文档至 2.4.11 (#13522) (by @Gonzalo2310)")])])]),a("li",[s._v("其它\n"),a("ul",[a("li",[s._v("移除多余的构建脚本 (by @ziyoung)")]),a("li",[s._v("修正文档超链接 (#13753) (by @iamkun)")]),a("li",[s._v("修正文档中不一致的大小写 (by @wonderjar)")]),a("li",[s._v("增加钉钉群的二维码 (#13957) (by @iamkun)")]),a("li",[s._v(".gitignore 增加 yarn 日志文件 (#13922) (by @mimimi)")]),a("li",[s._v("移除赞助商 多态 (#14156) (by @island205)")]),a("li",[s._v("Update readme qr code src (#13960) (by @iamkun)")]),a("li",[s._v("更新 CDN 链接，修正错别字 (by @ziyoung)")])])])]),a("h3",{attrs:{id:"2-4-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.11")]),a("p",[a("em",[s._v("2018-11-21")])]),a("ul",[a("li",[s._v("撤销 pr #13296，修复点击 Menu 外部导致 Submenu 收起的问题，#13478")]),a("li",[s._v("调整小屏幕（xs）媒体查询断点，#13468 （by @alekoshen712）")])]),a("h3",{attrs:{id:"2-4-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.10")]),a("p",[a("em",[s._v("2018-11-16")])]),a("ul",[a("li",[s._v("修复多次点击 Select 才显示下拉列表的问题，#13268")]),a("li",[s._v("Form 禁用时不显示 Input 的 clear 图标，#13208")]),a("li",[s._v("调整 Select，Progress，Autocomplete，Tooltip，Collaspe，TimePicker 的样式，#13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),a("li",[s._v("Carousel 组件新增 "),a("code",{pre:!0},[s._v("loop")]),s._v(" 属性，#13217")]),a("li",[s._v("Table 的 data 改变时，高亮行会继续保留，#13200")]),a("li",[s._v("Table 的 header slot 可以接收参数，#13263")]),a("li",[s._v("Table 的 "),a("code",{pre:!0},[s._v("clearFilter")]),s._v(" 方法支持参数，#13176")]),a("li",[s._v("Table 单元格内没有内容时不再创建 Tooltip，#13152 (by @rongxingsun)")]),a("li",[s._v("ColorPicker 面板的输入框内容可以正常显示了，#13278")]),a("li",[s._v("在拖拽时，ColorPicker 不再触发表单校验，#13299")]),a("li",[s._v("InputNumber 新增 "),a("code",{pre:!0},[s._v("select")]),s._v(" 方法，#13286 (by @st-sloth)")]),a("li",[s._v("Autocomplete 新增 "),a("code",{pre:!0},[s._v("clear")]),s._v(" 事件，#12171(by arthurdenner) #13326")]),a("li",[s._v("可以通过点击 Menu 外部来关闭 Menu，#13296")]),a("li",[s._v("Form 的 "),a("code",{pre:!0},[s._v("validateField")]),s._v(" 方法可以接收参数，#13319")]),a("li",[s._v("Cascader 新增 "),a("code",{pre:!0},[s._v("visible-change")]),s._v(" 事件，#13415")]),a("li",[s._v("DatePicker 新增 range-separator slot， #13272 (by @milworm)")]),a("li",[s._v("Tree 新增 "),a("code",{pre:!0},[s._v("iconClass")]),s._v(" 与 "),a("code",{pre:!0},[s._v("currentNodeKey")]),s._v(" 属性，#13337 #13197 (by @isnifer)")]),a("li",[s._v("Progress 的 "),a("code",{pre:!0},[s._v("status")]),s._v(" 添加了 text #13198 (by @ali-master)")]),a("li",[s._v("修复 Tree 的 "),a("code",{pre:!0},[s._v("defaultCheckedKeys")]),s._v(" 导致显示的错误，#13349 (by @dive2Pro)")])]),a("h3",{attrs:{id:"2-4-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.9")]),a("p",[a("em",[s._v("2018-10-26")])]),a("ul",[a("li",[s._v("Form 组件 clearValidate 方法参数支持字符串，#12990 （by @codinglobster）")]),a("li",[s._v("Badge 新增 type 属性，#12991")]),a("li",[s._v("用户可以使用 scoped-slot 来自定义表头，#13012（by @ivanseidel）")]),a("li",[s._v("修复 IE 下 Select 输入框不能输入的问题，#13034（by @GaliMU）")]),a("li",[s._v("Select 多选时，选项不换行，#12329 （by @akki-jat）")]),a("li",[s._v("Select 下拉列表展开后，箭头图标也可以正确显示，#12353（by @firesh）")]),a("li",[s._v("修复 Select 的 size 属性不生效的问题，#13070")]),a("li",[s._v("多选时可以清除 Select 已选中的值，#13049（by @ZSkycat）")]),a("li",[s._v("修复最后一个 TabNav 不能删除的问题，#13039")]),a("li",[s._v("修复 TabNav 中 label 显示不正确的问题，#13178")]),a("li",[s._v("Alert 新增 title slot，#13082（by @Kingwl）")]),a("li",[s._v("修复 Table 中的 tooltip 内容不正确的问题，#13159（by @elfman）")]),a("li",[s._v("优化 Upload 文件列表删除时的动画，#12987")]),a("li",[s._v("当 InputNumber 控制按钮不显示时，调整了边距，#13052")])]),a("h3",{attrs:{id:"2-4-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.8")]),a("ul",[a("li",[s._v("Switch 聚焦时不显示轮廓，#12771")]),a("li",[s._v("修复 Dropdown 在 ButtonGroup 中样式问题，#12819 （by @bluejfox）")]),a("li",[s._v("Dialog 新增 opened 事件，#12828")]),a("li",[s._v("修复 TabNav 显示顺序不正确的问题，#12846")]),a("li",[s._v("修复 Tabs 没有滑动到选中 tab 的问题，#12948")]),a("li",[s._v("修复 Tree 节点在拖拽时标识符不显示的问题，#12854")]),a("li",[s._v("Form 的 validate 事件参数中包含了校验的信息，#12860 （by @YamenSharaf）")]),a("li",[s._v("修复 DatePicker 没有校验用户输入时间的合法性问题，#12898")]),a("li",[s._v("修复 Table 表头的 "),a("code",{pre:!0},[s._v("render-header")]),s._v("属性不生效的问题，#12914")])]),a("h3",{attrs:{id:"2-4-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.7")]),a("p",[a("em",[s._v("2018-09-14")])]),a("ul",[a("li",[s._v("修复 DatePicker 未触发表单检验的问题，#12328，#12348")]),a("li",[s._v("修复 DatePicker 多选时报错的问题，#12347")]),a("li",[s._v("修复 DatePicker 选择时间时 spinner 位置不正确的问题，#12415 （by @rang-ali）")]),a("li",[s._v("修复 Datepicker 输入框自动填充的问题，#12521 （by @abdallanayer）")]),a("li",[s._v("修复 Cascader 中 Input 未高亮的问题，#12341")]),a("li",[s._v("修复 Tabpane 顺序不正确的问题，#12346")]),a("li",[s._v("修复 ColorPicker 取色光标位置不正确的问题，#12376 （by @cnwhy）")]),a("li",[s._v("调整 Submenu 的样式，#12457")]),a("li",[s._v("修复 Submenu 选中后没有高亮的问题，#12479")]),a("li",[s._v("修复 Cascader 选择值不正确的问题，#12508 （by @huangjinqiang）")]),a("li",[s._v("修复 Pagination 输入框值不正确的问题，#12525")]),a("li",[s._v("调整 Pagination 触发事件的顺序，#12530")]),a("li",[s._v("修复 Table 的 filter 不显示的问题，#12539")]),a("li",[s._v("修复 Tree 无法删除节点的问题，#12684")]),a("li",[s._v("修复 Select 在单选时 Input 高度变化的问题，#12719")]),a("li",[s._v("修复 Form 在嵌套时 label 显示不正确的问题，#12748")]),a("li",[s._v("新增 Input 的 autocomplete 属性，废弃 auto-complete 属性，#12514 （by @axetroy）")]),a("li",[s._v("新增 Form 的 slot-scope 展示表单校验信息，#12715 （by @YamenSharaf）")])]),a("h3",{attrs:{id:"2-4-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.6")]),a("p",[a("em",[s._v("2018-08-09")])]),a("ul",[a("li",[s._v("修复 Table 的 filter 初始值为空数组时不显示筛选图标的问题，#12165")]),a("li",[s._v("修复 Menu 在更改 "),a("code",{pre:!0},[s._v("collapse")]),s._v(" 时不保存菜单激活状态的问题，#12178 (by @elfman)")]),a("li",[s._v("修复 Cascader 未转义特殊字符的问题，#12248")]),a("li",[s._v("修复禁用的 RadioButton 在点击时显示 box-shadow 的问题，#12262")]),a("li",[s._v("修复 Select 初始值为 "),a("code",{pre:!0},[s._v("undefined")]),s._v(" 时方向键失效的问题，#12322")]),a("li",[s._v("修复 Select 多选时输入的关键字消失的问题，#12304")]),a("li",[s._v("修复 Select 多选时查询函数没有去抖的问题，#12181")]),a("li",[s._v("修复 Dialog 在全屏显示时宽度不正确的问题，#12203")]),a("li",[s._v("修复 Main 在 IE 下的显示不正确的问题，#12237")]),a("li",[s._v("修复 Input 触发两次表单校验的问题，#12260")]),a("li",[s._v("修复 Tree 在懒加载时添加节点导致节点消失的问题，#12256")]),a("li",[s._v("修复 Tree 节点在拖拽后无法删除的问题，#12279")]),a("li",[s._v("修复 Popover 在 InputNumber 聚焦时不显示的问题，#12284")]),a("li",[s._v("添加 Autocomplete 的 popper-append-to-body 属性，#12241")]),a("li",[s._v("添加 Pagination 的 "),a("code",{pre:!0},[s._v("page-size")]),s._v(" 属性 "),a("code",{pre:!0},[s._v("sync")]),s._v(" 修饰符的支持，#12281")])]),a("h3",{attrs:{id:"2-4-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.5")]),a("p",[a("em",[s._v("2018-07-26")])]),a("ul",[a("li",[s._v("修复 Table 设置 "),a("code",{pre:!0},[s._v("class-name")]),s._v(" 对 "),a("code",{pre:!0},[s._v("expand")]),s._v(" 列不生效的问题，#12006")]),a("li",[s._v("新增 Table 的 "),a("code",{pre:!0},[s._v("toggleAllSelection")]),s._v(" 方法，#12047")]),a("li",[s._v("修复 Input 包含 Select 时，suffix 插槽位置显示不正确的问题，#12108")]),a("li",[s._v("修复 Option 的 "),a("code",{pre:!0},[s._v("line-height")]),s._v(" 无法设置的问题，#12120")]),a("li",[s._v("修复初始值为 "),a("code",{pre:!0},[s._v("null")]),s._v(" 的 TimeSelect 在执行 "),a("code",{pre:!0},[s._v("resetField")]),s._v(" 后无法再赋值的问题，#12010")]),a("li",[s._v("修复 Tree 组件中不响应方向键以外 keydown 事件的问题，#12008")]),a("li",[s._v("修复 Tree 在懒加载情况下选中父节点的问题，#12106")]),a("li",[s._v("Tree 的 "),a("code",{pre:!0},[s._v("getCheckedNodes")]),s._v(" 方法新增 "),a("code",{pre:!0},[s._v("includeHalfChecked")]),s._v(" 参数，#12014")])]),a("h3",{attrs:{id:"2-4-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.4")]),a("p",[a("em",[s._v("2018-07-13")])]),a("ul",[a("li",[s._v("修复重置表单后触发 Select 组件校验问题，#11837")]),a("li",[s._v("修复 Input 组件 "),a("code",{pre:!0},[s._v("suffix")]),s._v(" 与 "),a("code",{pre:!0},[s._v("append")]),s._v(" 共存时样式错乱问题，#11951")]),a("li",[s._v("修复可清空的只读 Input 仍会显示清空图标的问题，#11967")]),a("li",[s._v("修复 Tree 节点禁用时仍可以选中的问题，#11847")]),a("li",[s._v("修复 Tree "),a("code",{pre:!0},[s._v("default-checked-keys")]),s._v(" 属性不生效的问题，#11971")]),a("li",[s._v("修复 Tree 在过滤节点时下 "),a("code",{pre:!0},[s._v("empty-text")]),s._v(" 不显示的问题，#11971")]),a("li",[s._v("修复 Table 的 "),a("code",{pre:!0},[s._v("empty-text")]),s._v(" 过长时的位置样式问题，#11965")]),a("li",[s._v("修复 Table 的 "),a("code",{pre:!0},[s._v("current-row-key")]),s._v(" 设置为 "),a("code",{pre:!0},[s._v("null")]),s._v(" 时高亮行不清除的问题，#11866")]),a("li",[s._v("修复当 "),a("code",{pre:!0},[s._v("filters")]),s._v(" 为空数组时显示过滤器下拉列表的问题，#11864")]),a("li",[s._v("修复 Radio 的 label 不阻止事件冒泡的问题，#11912")])]),a("h3",{attrs:{id:"2-4-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.3")]),a("p",[a("em",[s._v("2018-07-03")])]),a("ul",[a("li",[s._v("修复当自定义 Tree 节点高度时，"),a("code",{pre:!0},[s._v("allow-drop")]),s._v(" 不能正常工作的问题，#11797")]),a("li",[s._v("现在 Form 的 "),a("code",{pre:!0},[s._v("clearValidate")]),s._v(" 方法支持传入参数，指定需要清空校验结果的 FormItem，#11821")]),a("li",[s._v("新增 MessageBox 的 "),a("code",{pre:!0},[s._v("distinguishCancelAndClose")]),s._v(" 属性，#11831")])]),a("h3",{attrs:{id:"2-4-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.2")]),a("p",[a("em",[s._v("2018-06-26")])]),a("ul",[a("li",[s._v("修复 Table 的 "),a("code",{pre:!0},[s._v("class-name")]),s._v(" 和 "),a("code",{pre:!0},[s._v("label-class-name")]),s._v(" 属性不支持动态更新的问题，#11626")]),a("li",[s._v("修复 Table 在 "),a("code",{pre:!0},[s._v("highlight-current-row")]),s._v(" 为 "),a("code",{pre:!0},[s._v("false")]),s._v(" 时点击行也会触发高亮的问题，#11691 #11563")]),a("li",[s._v("修复 ButtonGroup 中只有一个 "),a("code",{pre:!0},[s._v("round")]),s._v(" 或 "),a("code",{pre:!0},[s._v("circle")]),s._v(" 的 Button 时的样式错误，#11605")]),a("li",[s._v("修复在某些情况下 Pagination 的条目数选择器的样式错误，#11622")]),a("li",[s._v("修复 Menu 的 "),a("code",{pre:!0},[s._v("collapse")]),s._v(" 属性变化后无法使用 "),a("code",{pre:!0},[s._v("open")]),s._v(" 方法的问题，#11646")]),a("li",[s._v("Tabs 的 "),a("code",{pre:!0},[s._v("before-leave")]),s._v(" 钩子添加了 "),a("code",{pre:!0},[s._v("activeName")]),s._v(" 和 "),a("code",{pre:!0},[s._v("oldActiveName")]),s._v(" 参数，#11713")]),a("li",[s._v("修复 Cascader 关闭后的聚焦问题，#11588")]),a("li",[s._v("修复 Cascader 在 "),a("code",{pre:!0},[s._v("change-on-select")]),s._v(" 状态下点击选项不关闭的问题，#11623")]),a("li",[s._v("现在通过代码改变 Select 的值后会触发表单校验，与 Input 行为一致，#11672")])]),a("h3",{attrs:{id:"2-4-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.1")]),a("p",[a("em",[s._v("2018-06-08")])]),a("ul",[a("li",[s._v("移除 Autocomplete 的重复类型声明，#11388")]),a("li",[s._v("修复嵌套在 Form 内的 Select 在 FireFox 浏览器中下拉箭头错位的问题，#11427")]),a("li",[s._v("修复 Select 的初始值为 "),a("code",{pre:!0},[s._v("null")]),s._v(" 时仍然显示清除图标的问题，#11460")]),a("li",[s._v("修复禁用的 Radio 在点击时显示 box-shadow 的问题，#11462")]),a("li",[s._v("新增 MessageBox 的 "),a("code",{pre:!0},[s._v("iconClass")]),s._v(" 属性，#11499")]),a("li",[s._v("新增 Tabs 的 "),a("code",{pre:!0},[s._v("stretch")]),s._v(" 属性，#11476")]),a("li",[s._v("修复 Tabs 开启 "),a("code",{pre:!0},[s._v("lazy")]),s._v(" 时渲染顺序异常的问题，#11461")]),a("li",[s._v("修复 Table 展开行时无法保留选中行样式的问题，#11464")]),a("li",[s._v("修复 Tabs 调用 "),a("code",{pre:!0},[s._v("before-leave")]),s._v(" 并返回 Promise 的时候，Tabs 会存在 focus 状态的问题，#11386")]),a("li",[s._v("修复 Popover 禁用状态下创建弹出框的问题，#11426")]),a("li",[s._v("修复 Tree 在懒加载状态下添加新节点造成无限循环的问题，#11430 （by @wangjingf）")]),a("li",[s._v("新增 Dialog 的 "),a("code",{pre:!0},[s._v("closed")]),s._v(" 事件，#11490")])]),a("h3",{attrs:{id:"2-4-0-fullerene"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.4.0 Fullerene")]),a("p",[a("em",[s._v("2018-05-28")])]),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("综合\n"),a("ul",[a("li",[s._v("使用原生 webpack 作为构建和打包工具，#11216")]),a("li",[s._v("可以全局配置弹出层的初始 z-index，#11257")])])]),a("li",[s._v("Autocomplete\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("hide-loading")]),s._v(" 属性，#11260")])])]),a("li",[s._v("Button\n"),a("ul",[a("li",[s._v("现在圆形按钮也支持通过 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性改变其尺寸了，#11275")])])]),a("li",[s._v("InputNumber\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("precision")]),s._v(" 属性，#11281")])])]),a("li",[s._v("Tabs\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("before-leave")]),s._v(" 钩子，#11259")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("lazy")]),s._v(" 属性，#11167（by @Kingwl）")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("sort")]),s._v(" 方法，支持手动排序，#11311")])])])]),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("Input\n"),a("ul",[a("li",[s._v("修复使用中文输入法快速输入文字时会导致视图重新渲染的问题，#11235（by @STLighter）")])])]),a("li",[s._v("Popover\n"),a("ul",[a("li",[s._v("修复当触发元素为 Radio 或 Checkbox 时控制台报错的问题，#11265")])])]),a("li",[s._v("Breadcrumb\n"),a("ul",[a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("to")]),s._v(" 属性不支持动态更新的问题，#11286")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("修复在 "),a("code",{pre:!0},[s._v("beforeUpload")]),s._v(" 方法返回的 Promise 中 resolve 一个 File 时控制台报错的问题，#11297（by @qusiba）")])])]),a("li",[s._v("Tooltip\n"),a("ul",[a("li",[s._v("修复内容为空时箭头错位的问题，#11335")])])]),a("li",[s._v("Autocomplete\n"),a("ul",[a("li",[s._v("修复在快速删除搜索内容后输入建议不正确的问题，#11323")])])]),a("li",[s._v("ColorPicker\n"),a("ul",[a("li",[s._v("修复关闭选色器时触发 "),a("code",{pre:!0},[s._v("active-change")]),s._v(" 事件的问题，#11304")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("修复筛选列表过长导致样式超出的问题，#11314")]),a("li",[s._v("修复排序后导致无法正常显示选中行样式的问题，#11348")])])]),a("li",[s._v("Checkbox\n"),a("ul",[a("li",[s._v("修复单个 Checkbox 不支持表单验证的问题，#11271")])])]),a("li",[s._v("Radio\n"),a("ul",[a("li",[s._v("修复通过空格可以选中被禁用的 Radio 的问题，#11303")])])]),a("li",[s._v("MessageBox\n"),a("ul",[a("li",[s._v("修复连续打开两个 MessageBox 时 "),a("code",{pre:!0},[s._v("el-popup-parent--hidden")]),s._v(" 无法移除的问题，#11371")])])])]),a("h3",{attrs:{id:"2-3-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.9")]),a("p",[a("em",[s._v("2018-05-18")])]),a("ul",[a("li",[s._v("修复当 TableColumn 的 "),a("code",{pre:!0},[s._v("prop")]),s._v(" 属性指定的字段在数据源中不存在时，鼠标移入该列单元格会报错的问题，#11137")]),a("li",[s._v("弹出类组件的 "),a("code",{pre:!0},[s._v("lockScroll")]),s._v(" 属性不再为父元素添加内联样式，而是添加相应类名，#11114")]),a("li",[s._v("修复 Progress 在 "),a("code",{pre:!0},[s._v("status")]),s._v(" 为 exception 时图标不显示的问题，#11172")]),a("li",[s._v("修复可搜索的 Cascader 在输入关键词后，选项的 "),a("code",{pre:!0},[s._v("disabled")]),s._v(" 属性失效的问题，#11185")]),a("li",[s._v("修复可展开的 Table 在展开某一行后更新数据源会造成该行无法收起的问题，#11186")]),a("li",[s._v("Tree 的 "),a("code",{pre:!0},[s._v("setCurrentKey")]),s._v(" 方法支持传入 "),a("code",{pre:!0},[s._v("null")]),s._v("，可取消当前高亮的节点，#11205")])]),a("h3",{attrs:{id:"2-3-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.8")]),a("p",[a("em",[s._v("2018-05-11")])]),a("ul",[a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("type")]),s._v(" 为 dates 的 DatePicker 在选择非当前月的日期后，面板会跳转至当前月的问题，#10973")]),a("li",[s._v("修复可清空的只读 Input 仍会显示清空图标的问题，#10912")]),a("li",[s._v("修复范围选择的 DatePicker 在未改变值的情况下关闭下拉面板仍会触发 "),a("code",{pre:!0},[s._v("change")]),s._v(" 事件的问题，#11017")]),a("li",[s._v("修复 Select 在有分组选项时不能正确通过键盘导航的问题，#11058")]),a("li",[s._v("新增 Select 的 "),a("code",{pre:!0},[s._v("prefix")]),s._v(" 具名 slot，#11063")]),a("li",[s._v("新增 FormItem 的 "),a("code",{pre:!0},[s._v("clearValidate")]),s._v(" 方法，#11076")]),a("li",[s._v("新增 Tree 的 "),a("code",{pre:!0},[s._v("checkOnClickNode")]),s._v(" 属性，#11111")])]),a("h3",{attrs:{id:"2-3-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.7")]),a("p",[a("em",[s._v("2018-04-29")])]),a("ul",[a("li",[s._v("修复 Table 在由于筛选而使原有的滚动条消失后表头各列宽度未及时更新的问题，#10834")]),a("li",[s._v("修复可清空的 Input 在初始值为 "),a("code",{pre:!0},[s._v("null")]),s._v(" 时仍然显示清空图标的问题，#10912")]),a("li",[s._v("修复在通过代码改变 ColorPicker 的绑定值后错误地触发 "),a("code",{pre:!0},[s._v("active-change")]),s._v(" 事件的问题，#10903（by @zhangbobell）")]),a("li",[s._v("修复可搜索的 Select 在备选项均被禁用时，通过键盘导航会造成无限循环的问题，#10945")])]),a("h3",{attrs:{id:"2-3-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.6")]),a("p",[a("em",[s._v("2018-04-21")])]),a("ul",[a("li",[s._v("修复 Tree 的 "),a("code",{pre:!0},[s._v("allow-drop")]),s._v(" 回调在使用 "),a("code",{pre:!0},[s._v("type")]),s._v(" 参数后的错误行为，#10821")]),a("li",[s._v("修复可搜索的单选 Select 在 IE11 中无法输入搜索关键词的问题，#10822")]),a("li",[s._v("修复单选 Select 在使用鼠标选中某个选项后错误地触发 "),a("code",{pre:!0},[s._v("blur")]),s._v(" 事件的问题，#10822")])]),a("h3",{attrs:{id:"2-3-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.5")]),a("p",[a("em",[s._v("2018-04-20")])]),a("ul",[a("li",[s._v("修复 DatePicker 的 "),a("code",{pre:!0},[s._v("type")]),s._v(" 为 week 时面板错误高亮的问题，#10712")]),a("li",[s._v("修复 InputNumber 初始值为 0 时输入框为空的问题，#10714")]),a("li",[s._v("新增 Select 的 "),a("code",{pre:!0},[s._v("automatic-dropdown")]),s._v(" 属性，#10042（by @Seebiscuit）")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("disabled")]),s._v(" 的 Rate 仍能通过键盘左右键改变组件值的问题，#10726（by @Richard-Choooou）")]),a("li",[s._v("现在 DatePicker 的 "),a("code",{pre:!0},[s._v("type")]),s._v(" 属性可以接收 "),a("code",{pre:!0},[s._v("'dates'")]),s._v("，用于选择多个日期，#10650（by @Mini256）")]),a("li",[s._v("新增 Pagination 的 "),a("code",{pre:!0},[s._v("prev-click")]),s._v(" 和 "),a("code",{pre:!0},[s._v("next-click")]),s._v(" 事件，#10755")]),a("li",[s._v("新增 Pagination 的 "),a("code",{pre:!0},[s._v("pager-count")]),s._v(" 属性，#10493（by @chongjohn716）")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("type")]),s._v(" 作为 Tree 的 "),a("code",{pre:!0},[s._v("allow-drop")]),s._v(" 属性回调的第三个参数，#10792")]),a("li",[s._v("改用 ResizeObserver 对元素的尺寸变化进行监测，#10779")])]),a("h3",{attrs:{id:"2-3-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.4")]),a("p",[a("em",[s._v("2018-04-12")])]),a("ul",[a("li",[s._v("删除 SubMenu 在 TypeScript 类型声明中重复的 "),a("code",{pre:!0},[s._v("showTimeout")]),s._v(" 属性，#10566（by @kimond）")]),a("li",[s._v("现在 Transfer 数据项的渲染支持通过 scoped slot 自定义，#10577")]),a("li",[s._v("修复点击 Pagination 禁用的上一页、下一页按钮仍会触发 "),a("code",{pre:!0},[s._v("current-change")]),s._v(" 事件的问题，#10628")]),a("li",[s._v("修复未绑定值的 Textarea 在 SSR 中会显示 "),a("code",{pre:!0},[s._v("undefined")]),s._v(" 的问题，#10630")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("type")]),s._v(" 为 border-card 的 Tabs 中被禁用标签项的样式，#10640")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("$index")]),s._v(" 作为 Table 的 "),a("code",{pre:!0},[s._v("formatter")]),s._v(" 属性回调的第四个参数，#10645")]),a("li",[s._v("修复 TypeScript 类型声明未导出 CheckboxButton 的问题，#10666")])]),a("h3",{attrs:{id:"2-3-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.3")]),a("p",[a("em",[s._v("2018-04-04")])]),a("ul",[a("li",[s._v("新增 Card 的 "),a("code",{pre:!0},[s._v("shadow")]),s._v(" 属性，#10418（by @YunYouJun）")]),a("li",[s._v("修复 Badge 在 "),a("code",{pre:!0},[s._v("value")]),s._v(" 属性为 "),a("code",{pre:!0},[s._v("0")]),s._v(" 时不显示上标的问题，#10470")]),a("li",[s._v("修复 Tree 节点拖拽相关的问题，#10474 #10494")]),a("li",[s._v("新增 Autocomplete 的 "),a("code",{pre:!0},[s._v("placement")]),s._v(" 属性，#10475")]),a("li",[s._v("现在 "),a("code",{pre:!0},[s._v("default-time")]),s._v(" 属性也可用于非范围选择的 DateTimePicker 了，#10321（by @RickMacTurk）")]),a("li",[s._v("修复 TabItem 在浏览器失焦和隐藏后出现蓝色边框的问题，#10503")]),a("li",[s._v("新增 SubMenu 的 "),a("code",{pre:!0},[s._v("popper-append-to-body")]),s._v(" 属性，#10515")]),a("li",[s._v("现在非链接的 BreadcrumbItem 在 hover 时不再具有视觉反馈，#10551")]),a("li",[s._v("调整 InputNumber "),a("code",{pre:!0},[s._v("change")]),s._v(" 事件的触发时机，使得在回调中能够取得最新的组件绑定值，#10553")])]),a("h3",{attrs:{id:"2-3-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.2")]),a("p",[a("em",[s._v("2018-03-29")])]),a("ul",[a("li",[s._v("修复 Autocomplete 报错的问题，#10442")])]),a("h3",{attrs:{id:"2-3-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.1")]),a("p",[a("em",[s._v("2018-03-29")])]),a("ul",[a("li",[s._v("修复 Input 的 "),a("code",{pre:!0},[s._v("type")]),s._v(" 属性未传递至原生 input 元素的问题，#10415")]),a("li",[s._v("新增 Select 的 "),a("code",{pre:!0},[s._v("blur")]),s._v(" 方法，#10416")])]),a("h3",{attrs:{id:"2-3-0-diamond"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamond","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.3.0 Diamond")]),a("p",[a("em",[s._v("2018-03-28")])]),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("Table\n"),a("ul",[a("li",[s._v("现在 TableColumn 的 "),a("code",{pre:!0},[s._v("formatter")]),s._v(" 属性可以是动态的，#10184（by @elfman）")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("select-on-indeterminate")]),s._v(" 属性，#9924（by @syn-zeta）")])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("collapse-transition")]),s._v(" 属性，#8809（by @limichange）")])])]),a("li",[s._v("Input\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("select")]),s._v(" 方法，#10229")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("blur")]),s._v(" 方法，#10356")])])]),a("li",[s._v("ColorPicker\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("predefine")]),s._v(" 属性，#10170（by @elfman）")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("draggable")]),s._v("、"),a("code",{pre:!0},[s._v("allow-drop")]),s._v(" 和 "),a("code",{pre:!0},[s._v("allow-drag")]),s._v(" 属性，以及 "),a("code",{pre:!0},[s._v("node-drag-start")]),s._v("、"),a("code",{pre:!0},[s._v("node-drag-enter")]),s._v("、"),a("code",{pre:!0},[s._v("node-drag-leave")]),s._v("、"),a("code",{pre:!0},[s._v("node-drag-over")]),s._v("、"),a("code",{pre:!0},[s._v("node-drag-end")]),s._v(" 和 "),a("code",{pre:!0},[s._v("node-drop")]),s._v(" 事件，#9251 #10372（by @elfman）")])])]),a("li",[s._v("Form\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("validate")]),s._v(" 方法新增第二个参数，包含未通过本次校验的表单项信息，#10279")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("validate")]),s._v(" 事件，#10351")])])]),a("li",[s._v("Progress\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("color")]),s._v(" 属性，#10352（by @YunYouJun）")])])]),a("li",[s._v("Button\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("circle")]),s._v(" 属性，#10359（by @YunYouJun）")])])])]),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("Form\n"),a("ul",[a("li",[s._v("修复嵌套复合型 Input 时，FormItem 标签与输入框未对齐的问题，#10189")])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("现在折叠状态的菜单项仅在传入 "),a("code",{pre:!0},[s._v("title")]),s._v(" slot 时才显示 Tooltip，#10193（by @PanJiaChen）")])])]),a("li",[s._v("Pagination\n"),a("ul",[a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("current-change")]),s._v(" 在未发生用户交互时错误触发的问题，#10247")])])]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("现在时间日期选择器下拉面板中的值能够正确地从 "),a("code",{pre:!0},[s._v("format")]),s._v(" 属性中获取对应格式了，#10174（by @remizovvv）")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("现在拖拽上传会拦截不在 "),a("code",{pre:!0},[s._v("accept")]),s._v(" 属性范围内的文件，#10278")])])])]),a("h3",{attrs:{id:"2-2-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.2.2")]),a("p",[a("em",[s._v("2018-03-14")])]),a("ul",[a("li",[s._v("新增 Input 的 "),a("code",{pre:!0},[s._v("clear")]),s._v(" 事件，#9988（by @blackmiaool）")]),a("li",[s._v("现在 ColorPicker 的手动输入支持 "),a("code",{pre:!0},[s._v("hsl")]),s._v("、"),a("code",{pre:!0},[s._v("hsv")]),s._v(" 和 "),a("code",{pre:!0},[s._v("rgb")]),s._v(" 格式了，#9991")]),a("li",[s._v("修复 DatePicker 在清除初始值时不触发 "),a("code",{pre:!0},[s._v("change")]),s._v(" 事件的问题，#9986")]),a("li",[s._v("现在 Rate 的图标类相关属性支持动态更新了，#10003")]),a("li",[s._v("修复含有固定列的 Table 在设置 "),a("code",{pre:!0},[s._v("max-height")]),s._v(" 属性后有时不能及时更新布局高度的问题，#10034")]),a("li",[s._v("现在 DatePicker 的范围选择支持先点选结束日期，再点选开始日期了，#8156（by @earlymeme）")]),a("li",[s._v("新增 Pagination 的 "),a("code",{pre:!0},[s._v("disabled")]),s._v(" 属性，#10006")]),a("li",[s._v("新增 Popover 的 "),a("code",{pre:!0},[s._v("after-enter")]),s._v(" 和 "),a("code",{pre:!0},[s._v("after-leave")]),s._v(" 事件，#10047")]),a("li",[s._v("修复重置表单后，用户第一次改变 Select 的值时不触发校验的问题，#10105")]),a("li",[s._v("修复 Table 的固定列在某些情况下宽度不正确的问题，#10130")]),a("li",[s._v("修复调用 MessageBox 未传入 "),a("code",{pre:!0},[s._v("title")]),s._v(" 时，打开的 MessageBox 会继承上一个实例的 "),a("code",{pre:!0},[s._v("title")]),s._v(" 属性的问题，#10126（by @Pochodaydayup）")]),a("li",[s._v("新增 Slider 的 "),a("code",{pre:!0},[s._v("input-size")]),s._v(" 属性，#10154")]),a("li",[s._v("新增 Transfer 的 "),a("code",{pre:!0},[s._v("left-check-change")]),s._v(" 和 "),a("code",{pre:!0},[s._v("right-check-change")]),s._v(" 事件，#10156")])]),a("h3",{attrs:{id:"2-2-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.2.1")]),a("p",[a("em",[s._v("2018-03-02")])]),a("ul",[a("li",[s._v("修复 Aside、Header 和 Footer 在某些布局中被压缩的问题，#9812")]),a("li",[s._v("修复设置了 "),a("code",{pre:!0},[s._v("height")]),s._v(" 属性的 Table 在服务端渲染时无法加载的问题，#9876")]),a("li",[s._v("修复可展开的 Table 在展开某一行后高度未重新计算的问题，#9848")]),a("li",[s._v("修复在 DateTimePicker 中手动输入日期后不能正确触发 "),a("code",{pre:!0},[s._v("change")]),s._v(" 事件的问题，#9913")]),a("li",[s._v("修复鼠标右键点击 Select 的输入框会展开选项的问题，#9894（by @openks）")]),a("li",[s._v("新增 Slider 的 "),a("code",{pre:!0},[s._v("tooltip-class")]),s._v(" 属性，#9957")]),a("li",[s._v("现在的 Select 在选中选项后仍然处于 focus 状态，#9857（by @Seebiscuit）")]),a("li",[s._v("新增 Transfer 的 "),a("code",{pre:!0},[s._v("target-order")]),s._v(" 属性，#9960")])]),a("h3",{attrs:{id:"2-2-0-graphite"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.2.0 Graphite")]),a("p",[a("em",[s._v("2018-02-12")])]),a("h4",{attrs:{id:"xin-te-xing-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 新特性")]),a("ul",[a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("SubMenu 新增 "),a("code",{pre:!0},[s._v("popper-class")]),s._v(" 和 "),a("code",{pre:!0},[s._v("disabled")]),s._v(" 属性，#9604 #9771")]),a("li",[s._v("现在水平模式下的 Menu 支持多级 SubMenu 了，#9741")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("node-contextmenu")]),s._v(" 事件，#9678")]),a("li",[s._v("现在可以使用 scoped slot 自定义树节点的模板了，#9686")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("getNode")]),s._v("、"),a("code",{pre:!0},[s._v("remove")]),s._v("、"),a("code",{pre:!0},[s._v("append")]),s._v("、"),a("code",{pre:!0},[s._v("insertBefore")]),s._v("、"),a("code",{pre:!0},[s._v("insertAfter")]),s._v("、"),a("code",{pre:!0},[s._v("getCheckedKeys")]),s._v("、"),a("code",{pre:!0},[s._v("getHalfCheckedNodes")]),s._v("、"),a("code",{pre:!0},[s._v("getHalfCheckedKeys")]),s._v(" 方法和 "),a("code",{pre:!0},[s._v("check")]),s._v(" 事件，#9718 #9730")])])]),a("li",[s._v("Transfer\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("clearQuery")]),s._v(" 方法，#9753")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("popper-append-to-body")]),s._v(" 属性，#9782")])])])]),a("h4",{attrs:{id:"xiu-fu-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修复")]),a("ul",[a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("修复点击可展开行的展开图标会触发 "),a("code",{pre:!0},[s._v("row-click")]),s._v(" 事件的问题，#9654")]),a("li",[s._v("修复某些情况下通过拖动改变列宽后，布局没有同步更新的问题，#9668")]),a("li",[s._v("修复合计行与固定列并存时的样式问题，#9667")])])]),a("li",[s._v("Container\n"),a("ul",[a("li",[s._v("修复布局组件在 IE11 中无法自动填充可用空间的问题，#9655")])])]),a("li",[s._v("Loading\n"),a("ul",[a("li",[s._v("修复在 "),a("code",{pre:!0},[s._v("mounted")]),s._v(" 中修改 "),a("code",{pre:!0},[s._v("v-loading")]),s._v(" 的值为 true 时不能正确显示 Loading 的问题，#9722")])])]),a("li",[s._v("Switch\n"),a("ul",[a("li",[s._v("修复点击时会触发两次原生 click 事件的问题，#9760")])])])]),a("h3",{attrs:{id:"2-1-0-charcoal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.1.0 Charcoal")]),a("p",[a("em",[s._v("2018-01-31")])]),a("h4",{attrs:{id:"xin-te-xing-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 新特性")]),a("ul",[a("li",[s._v("Cascader\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("focus")]),s._v(" 和 "),a("code",{pre:!0},[s._v("blur")]),s._v(" 事件，#9184（by @viewweiwu）")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("filter-method")]),s._v(" 方法加入第三个参数 "),a("code",{pre:!0},[s._v("column")]),s._v("，#9196（by @liyanlong）")])])]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("prefix-icon")]),s._v(" 和 "),a("code",{pre:!0},[s._v("clear-icon")]),s._v(" 属性，#9237（by @AdamSGit）")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("default-time")]),s._v(" 属性，#9094（by @nighca）")]),a("li",[a("code",{pre:!0},[s._v("value-format")]),s._v(" 属性增加对 "),a("code",{pre:!0},[s._v("timestamp")]),s._v(" 的支持，#9319（by @wacky6）")])])]),a("li",[s._v("InputNumber\n"),a("ul",[a("li",[s._v("组件绑定变量的值支持 "),a("code",{pre:!0},[s._v("undefined")]),s._v("，#9361")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("auto-complete")]),s._v(" 属性，#9388")])])]),a("li",[s._v("Form\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("disabled")]),s._v(" 属性，#9529")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("validateOnRuleChange")]),s._v(" 属性，#8141")])])]),a("li",[s._v("Notificaition\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("closeAll")]),s._v(" 方法，#9514")])])])]),a("h4",{attrs:{id:"xiu-fu-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修复")]),a("ul",[a("li",[s._v("InputNumber\n"),a("ul",[a("li",[s._v("修复初始输入小数点时被重置的问题，#9116")])])]),a("li",[s._v("Dropdown\n"),a("ul",[a("li",[s._v("修复当页面仅有水平滚动条时，某些浏览器下拉菜单定位错误的问题，#9138（by @banzhuanmei）")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("修复带有固定列的 Table 在列数据变化后固定列的个数计算错误的问题，#9188（by @kolesoffac）")]),a("li",[s._v("修复多级表头最后一列的边框不能正确显示的问题，#9326")]),a("li",[s._v("修复在 Safari 浏览器中表头错位的问题，#9327")]),a("li",[s._v("修复带有展开行的表格在展开某一行后，当表格数据更新但 "),a("code",{pre:!0},[s._v("row-key")]),s._v(" 值不变时，该行会自动收起的问题，#9462")]),a("li",[s._v("修复在一些情况下不必要的多次渲染问题，#9426")]),a("li",[s._v("修复动态改变 TableColumn 的 "),a("code",{pre:!0},[s._v("width")]),s._v(" 属性时，其宽度计算错误的问题，#9426")])])]),a("li",[s._v("Loading\n"),a("ul",[a("li",[s._v("修复某些情况下 Loading 不能被正确隐藏的问题，#9313")])])]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("focus")]),s._v(" 方法在范围选择时无效的问题，#9437")]),a("li",[s._v("修复当目前时刻处于不可选择的范围内时，点击面板上的「此刻」按钮仍能选中目前时刻的问题，#9470（by @wacky6）")]),a("li",[s._v("修复当在月选择面板中选中天数较少的月份时，日期面板呈现下一个月的问题，#9577（by @wacky6）")])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("修复在 IE 11 中的样式问题，#9454")])])])]),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("Menu\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("collapse")]),s._v(" 状态下的弹出菜单现在会插入至 body 元素，修复其位于 Aside 内时弹出菜单不可见的问题，#9263")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("勾选多选表格的 checkbox 时不再同时触发 "),a("code",{pre:!0},[s._v("row-click")]),s._v(" 事件，#9467")])])]),a("li",[s._v("Loading\n"),a("ul",[a("li",[s._v("非全屏 Loading 遮罩层的 "),a("code",{pre:!0},[s._v("z-index")]),s._v(" 修改为 2000；全屏 Loading 遮罩层的 "),a("code",{pre:!0},[s._v("z-index")]),s._v(" 值会随页面上的弹出组件动态更新，#9522")])])]),a("li",[s._v("Dropdown\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("show-timeout")]),s._v(" 和 "),a("code",{pre:!0},[s._v("hide-timeout")]),s._v(" 属性现在仅在 trigger 为 "),a("code",{pre:!0},[s._v("hover")]),s._v(" 时生效，#9573")])])])]),a("h3",{attrs:{id:"2-0-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.11")]),a("p",[a("em",[s._v("2018-01-08")])]),a("ul",[a("li",[s._v("修复 Input 的 "),a("code",{pre:!0},[s._v("prepend")]),s._v(" 或 "),a("code",{pre:!0},[s._v("append")]),s._v(" slot 中 Select 的边框颜色错误，#9089")]),a("li",[s._v("修复 Select 的 "),a("code",{pre:!0},[s._v("remove-tag")]),s._v(" 事件参数与文档不符的问题，#9090")]),a("li",[s._v("新增 SubMenu 的 "),a("code",{pre:!0},[s._v("show-timeout")]),s._v(" 和 "),a("code",{pre:!0},[s._v("hide-timeout")]),s._v(" 属性，#8934（by @HugoLew）")]),a("li",[s._v("修复按需引入 Table 时 "),a("code",{pre:!0},[s._v("show-overflow-tooltip")]),s._v(" 的 Tooltip 样式丢失的问题，#9130")]),a("li",[s._v("修复 Table 在执行 "),a("code",{pre:!0},[s._v("clearSort")]),s._v(" 后点击对应列的排序图标无法正常排序的问题，#9100（by @zEmily）")]),a("li",[s._v("捷克语的 i18n 配置文件由 "),a("code",{pre:!0},[s._v("cz")]),s._v(" 重命名为 "),a("code",{pre:!0},[s._v("cs-CZ")]),s._v("，#9164")])]),a("h3",{attrs:{id:"2-0-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.10")]),a("p",[a("em",[s._v("2017-12-29")])]),a("ul",[a("li",[s._v("修复了 Table 在固定列和合计行并存时的高度计算错误的问题，#9026")]),a("li",[s._v("修复了 Table 样式 SCSS 文件错误编译的问题，#9028")]),a("li",[s._v("现在 DatePicker 的 "),a("code",{pre:!0},[s._v("change")]),s._v(" 事件只会在 "),a("code",{pre:!0},[s._v("value")]),s._v(" 真正改变的时候触发，#9029（by @remizovvv）")]),a("li",[s._v("新增 Input 的 "),a("code",{pre:!0},[s._v("tabindex")]),s._v(" 属性，#9041（by @dicklwm）")])]),a("h3",{attrs:{id:"2-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.9🎄")]),a("p",[a("em",[s._v("2017-12-24")])]),a("ul",[a("li",[s._v("新增 Upload 的 "),a("code",{pre:!0},[s._v("before-remove")]),s._v(" 钩子方法，#8788（by @firesh）")]),a("li",[s._v("修复 FormItem 的 "),a("code",{pre:!0},[s._v("error")]),s._v(" 属性初始值无效的问题，#8840")]),a("li",[s._v("通过指令调用的 Loading 现在支持以 "),a("code",{pre:!0},[s._v("element-loading-custom-class")]),s._v(" 属性的方式设置自定义类名，#8826（by @earlymeme）")]),a("li",[s._v("修复 CarouselItem 为异步获取时被隐藏的问题，#8921")]),a("li",[s._v("新增 Tree 的 "),a("code",{pre:!0},[s._v("renderAfterExpand")]),s._v(" 属性，#8972")])]),a("h3",{attrs:{id:"2-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.8")]),a("p",[a("em",[s._v("2017-12-12")])]),a("ul",[a("li",[s._v("新增西班牙语文档")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("show-timeout")]),s._v(" 对点击触发的 Dropdown 无效的问题，#8734（by @presidenten）")]),a("li",[s._v("修复 Form 对于 "),a("code",{pre:!0},[s._v("trigger")]),s._v(" 为 blur 的校验规则触发时机有误的问题，#8776")]),a("li",[s._v("修复 DatePicker 在范围选择时 blur 事件触发时机有误的问题，#8784")]),a("li",[s._v("TimePicker 的 "),a("code",{pre:!0},[s._v("format")]),s._v(" 新增对 AM/PM 的支持，#8620（by @firesh）")])]),a("h3",{attrs:{id:"2-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.7")]),a("p",[a("em",[s._v("2017-11-29")])]),a("ul",[a("li",[s._v("修复禁用文字按钮的样式问题，#8570")])]),a("h3",{attrs:{id:"2-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.6")]),a("p",[a("em",[s._v("2017-11-29")])]),a("ul",[a("li",[s._v("修复 Table 排序图标的样式问题，#8405")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("trigger")]),s._v(" 为 manual 的 Popover 的触发问题，#8467")]),a("li",[s._v("新增 Autocomplete 的 "),a("code",{pre:!0},[s._v("prefix-icon")]),s._v(" 和 "),a("code",{pre:!0},[s._v("suffix-icon")]),s._v(" 属性，#8446（by @liyanlong）")]),a("li",[s._v("新增 Cascader 的 "),a("code",{pre:!0},[s._v("separator")]),s._v(" 属性，#8501")]),a("li",[s._v("新增 Input 的 "),a("code",{pre:!0},[s._v("clearable")]),s._v(" 属性，#8509（by @lbogdan）")]),a("li",[s._v("新增 Pagination 的 "),a("code",{pre:!0},[s._v("background")]),s._v(" 属性，#8553")])]),a("h3",{attrs:{id:"2-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.5")]),a("p",[a("em",[s._v("2017-11-17")])]),a("ul",[a("li",[s._v("修复上个版本引入的 Popover、Tree、Breadcrumb、Cascader 的 bug，#8188 #8217 #8283")]),a("li",[s._v("修复 clickoutside 指令的内存泄露问题，#8168 #8225（by @badpunman @STLighter）")]),a("li",[s._v("修复默认尺寸的多选 Select 在清空选项后输入框高度不随之更新的问题，#8317（by @luciy）")]),a("li",[s._v("新增 Select 的 "),a("code",{pre:!0},[s._v("collapse-tags")]),s._v(" 属性，用于在多选时以文字代替 Tag，避免组件高度的增大，#8190")]),a("li",[s._v("修复被隐藏的 Table 会造成 CPU 占用持续增加的问题，#8351")]),a("li",[s._v("开放 Table 的 "),a("code",{pre:!0},[s._v("doLayout")]),s._v(" 方法，用于重新计算 Table 的布局，#8351")])]),a("h3",{attrs:{id:"2-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.4")]),a("p",[a("em",[s._v("2017-11-10")])]),a("ul",[a("li",[s._v("提升 Cascader、Dropdown、Message、Notification、Popover、Tooltip、Tree 的可访问性")]),a("li",[s._v("修复当视口变窄时 Container 无法同步更新其宽度的问题，#8042")]),a("li",[s._v("修复 Tree 的 "),a("code",{pre:!0},[s._v("updateKeyChildren")]),s._v(" 在删除子节点时的行为错误，#8100")]),a("li",[s._v("修复带有边框的 CheckboxButton 在 Form 中高度错误的问题，#8100")]),a("li",[s._v("修复 Menu 在解析自定义颜色时的错误，#8153（by @zhouyixiang）")])]),a("h3",{attrs:{id:"2-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.3")]),a("p",[a("em",[s._v("2017-11-03")])]),a("ul",[a("li",[s._v("修复范围选择的 DatePicker "),a("code",{pre:!0},[s._v("editable")]),s._v(" 和 "),a("code",{pre:!0},[s._v("readonly")]),s._v(" 属性无法正常工作的问题，#7922")]),a("li",[s._v("修复嵌套的 Tabs 的样式错误，#7941")]),a("li",[s._v("修复纵向 Steps 中最后一个 Step 的样式错误，#7980")]),a("li",[s._v("修复 Pagination 的 "),a("code",{pre:!0},[s._v("current-change")]),s._v(" 事件触发时机错误的问题，#7995")]),a("li",[s._v("修复由于 Menu 使用了未注册的 Tooltip 造成其在按需引入时报错的问题，#7995")])]),a("h3",{attrs:{id:"2-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.2")]),a("p",[a("em",[s._v("2017-10-31")])]),a("ul",[a("li",[s._v("在 InputNumber 的加减按钮上单击鼠标右键不再触发值的改变，#7817")]),a("li",[s._v("Form 的 "),a("code",{pre:!0},[s._v("validate")]),s._v(" 方法现在能够正确地在异步校验完成后执行回调了，#7774（by @Allenice）")]),a("li",[s._v("修复 DatePicker 的范围选择在内核为 Chromium 53-57 的浏览器中无法使用的问题，#7838")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("list-type")]),s._v(" 为 picture-card 的 Upload 预览和删除图标丢失的问题，#7857")]),a("li",[s._v("新增 TableColumn 的 "),a("code",{pre:!0},[s._v("sort-by")]),s._v(" 属性，#7828（by @wangfengming）")]),a("li",[s._v("修复周模式下的 DatePicker 在选择某年第一周可能会显示为前一年第一周的问题，#7860（by @hh23485）")]),a("li",[s._v("修复垂直模式的 Steps 中图标宽度的样式错误，#7891")]),a("li",[s._v("增大了 Tree 中展开箭头的点击热区，#7891")])]),a("h3",{attrs:{id:"2-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.1")]),a("p",[a("em",[s._v("2017-10-28")])]),a("ul",[a("li",[s._v("修复 RadioButton 和 CheckboxButton 的样式问题，#7793")]),a("li",[s._v("修复 TimePicker 在某些情况下无法滚动的问题，#7811")]),a("li",[s._v("修复部分组件在按需引入时样式不完整的问题，#7811")])]),a("h3",{attrs:{id:"2-0-0-carbon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.0 Carbon")]),a("p",[a("em",[s._v("2017-10-27")])]),a("h4",{attrs:{id:"xin-te-xing-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 新特性")]),a("ul",[a("li",[s._v("综合\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("theme-chalk")]),s._v(" 主题")]),a("li",[s._v("增强以下组件的可访问性：Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload")]),a("li",[s._v("新增布局组件 Container、Header、Aside、Main 和 Footer")]),a("li",[s._v("新增 TypeScript 类型声明")]),a("li",[s._v("重绘了全部图标，并新增了部分图标")]),a("li",[s._v("新增了一系列基于断点的工具类，用于当视口尺寸满足一定条件时隐藏元素")]),a("li",[s._v("新增全局配置组件尺寸的功能。在引入 Element 时，配置 "),a("code",{pre:!0},[s._v("size")]),s._v(" 字段可以改变所有组件的默认尺寸")])])]),a("li",[s._v("Button\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("round")]),s._v(" 属性，用于圆角按钮 #6643")])])]),a("li",[s._v("TimeSelect\n"),a("ul",[a("li",[s._v("可以用 "),a("code",{pre:!0},[s._v("Up")]),s._v("、"),a("code",{pre:!0},[s._v("Down")]),s._v(" 导航，用 "),a("code",{pre:!0},[s._v("Enter")]),s._v(" 选中时间 #6023")])])]),a("li",[s._v("TimePicker\n"),a("ul",[a("li",[s._v("可以用方向键导航，用 "),a("code",{pre:!0},[s._v("Enter")]),s._v(" 选中时间 #6050")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("start-placeholder")]),s._v(" 和 "),a("code",{pre:!0},[s._v("end-placeholder")]),s._v("，用于设置范围选择时两个输入框的占位符 #7169")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("arrow-control")]),s._v(" 属性，提供另一种交互形式，#7438")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[s._v("子节点在首次被展开之前不进行渲染 #6257")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("check-descendants")]),s._v(" 属性，设置 "),a("code",{pre:!0},[s._v("lazy")]),s._v(" 模式下勾选节点时，是否完全展开整个子树 #6235")])])]),a("li",[s._v("Tag\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性 #7203")])])]),a("li",[s._v("Datepicker\n"),a("ul",[a("li",[s._v("type 为 "),a("code",{pre:!0},[s._v("datetimerange")]),s._v(" 时可以使用 "),a("code",{pre:!0},[s._v("timeFormat")]),s._v(" 格式化时间选择器 #6052")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("start-placeholder")]),s._v(" 和 "),a("code",{pre:!0},[s._v("end-placeholder")]),s._v("，用于设置范围选择时两个输入框的占位符 #7169")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("value-format")]),s._v(" 属性，支持对绑定值的格式进行自定义，#7367")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("unlink-panels")]),s._v(" 属性，用于在选择日期范围时取消两个日期面板之间的联动")])])]),a("li",[s._v("MessageBox\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("closeOnHashChange")]),s._v(" 属性 #6043")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("center")]),s._v(" 属性，提供居中布局 #7029")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("roundButton")]),s._v(" 属性，使得内部按钮为圆角按钮 #7029")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" 属性，使得 "),a("code",{pre:!0},[s._v("message")]),s._v(" 支持传入 HTML 字符串"),a("sup",[s._v("*")]),s._v(" #6043")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("inputType")]),s._v(" 属性，用户指定内部输入框的类型，#7651")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("width")]),s._v("、"),a("code",{pre:!0},[s._v("fullscreen")]),s._v("、"),a("code",{pre:!0},[s._v("append-to-body")]),s._v(" 属性，支持嵌套使用")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("center")]),s._v(" 属性，提供居中布局 #7042")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("focus-after-closed")]),s._v("、"),a("code",{pre:!0},[s._v("focus-after-open")]),s._v("属性，支持无障碍访问 #6511")])])]),a("li",[s._v("ColorPicker\n"),a("ul",[a("li",[s._v("增加手动输入色值的支持 #6167")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性，用于控制组件的大小 #7026")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("disabled")]),s._v(" 属性，用于禁用组件 #7026")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("popper-class")]),s._v(" 属性，#7351")])])]),a("li",[s._v("Message\n"),a("ul",[a("li",[s._v("图标部分使用 icon 代替图片，从而支持通过 CSS 修改图标背景色 #6207")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" 属性，使得 "),a("code",{pre:!0},[s._v("message")]),s._v(" 属性支持传入 HTML 字符串"),a("sup",[s._v("*")]),s._v(" #6207")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("center")]),s._v(" 属性，提供居中布局 #6875")])])]),a("li",[s._v("Notification\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("position")]),s._v(" 属性，用于配置 Notification 出现的位置 #6231")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" 属性，使得 "),a("code",{pre:!0},[s._v("message")]),s._v(" 属性支持传入 HTML 字符串"),a("sup",[s._v("*")]),s._v(" #6231")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("showClose")]),s._v(" 属性，用于隐藏关闭按钮 #6402")])])]),a("li",[s._v("Rate\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("show-score")]),s._v(" 属性，控制是否在右侧显示当前分数 #6295")])])]),a("li",[s._v("Tabs\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("tab-position")]),s._v(" 属性，控制选项面板内容显示的上、下、左、右四个方向 #6096")])])]),a("li",[s._v("Radio\n"),a("ul",[a("li",[s._v("增加 "),a("code",{pre:!0},[s._v("border")]),s._v(" 属性和 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性 #6690")])])]),a("li",[s._v("Checkbox\n"),a("ul",[a("li",[s._v("增加 "),a("code",{pre:!0},[s._v("border")]),s._v(" 属性和 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性 #6690")])])]),a("li",[s._v("Alert\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("center")]),s._v(" 属性，提供居中布局 #6876")])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("background-color")]),s._v("、"),a("code",{pre:!0},[s._v("text-color")]),s._v(" 和 "),a("code",{pre:!0},[s._v("active-text-color")]),s._v(" 属性，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("open")]),s._v(" 和 "),a("code",{pre:!0},[s._v("close")]),s._v(" 方法，支持手动打开和关闭 SubMenu，#7412")])])]),a("li",[s._v("Form\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("inline-message")]),s._v(" 属性，设置后校验信息会以行内样式显示 #7032")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("status-icon")]),s._v(" 属性，用于在输入框中显示校验结果反馈图标 #7032")]),a("li",[s._v("Form 和 FormItem 新增 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性，用于控制表单内组件的尺寸，#7428")]),a("li",[a("code",{pre:!0},[s._v("validate")]),s._v(" 方法在不传入 callback 的情况下返回 promise，#7405")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("clearValidate")]),s._v(" 方法，用于清空所有表单项的验证信息，#7623")])])]),a("li",[s._v("Input\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("suffix")]),s._v("、"),a("code",{pre:!0},[s._v("prefix")]),s._v(" 的 slot，以及 "),a("code",{pre:!0},[s._v("suffixIcon")]),s._v("、"),a("code",{pre:!0},[s._v("prefixIcon")]),s._v(" 属性，用于给输入框内部增加前置和后置内容 #7032")])])]),a("li",[s._v("Breadcrumb\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("separator-class")]),s._v(" 属性，可使用图标作为分隔符 #7203")])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("simple")]),s._v(" 属性，用于开启简洁风格的步骤条 #7274")])])]),a("li",[s._v("Pagination\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("prev-text")]),s._v(" 和 "),a("code",{pre:!0},[s._v("next-text")]),s._v(" 属性，用于自定义上一页和下一页的文本 #7005")])])]),a("li",[s._v("Loading\n"),a("ul",[a("li",[s._v("配置对象新增 "),a("code",{pre:!0},[s._v("spinner")]),s._v(" 和 "),a("code",{pre:!0},[s._v("background")]),s._v(" 字段，支持自定义加载图标和背景色，#7390")])])]),a("li",[s._v("Autocomplete\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("debounce")]),s._v(" 属性，#7413")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("limit")]),s._v(" 和 "),a("code",{pre:!0},[s._v("on-exceed")]),s._v(" 属性，支持对上传文件的个数进行限制，#7405")])])]),a("li",[s._v("DateTimePicker\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("time-arrow-control")]),s._v(" 属性，用于开启时间选择器的 "),a("code",{pre:!0},[s._v("arrow-control")]),s._v("，#7438")])])]),a("li",[s._v("Layout\n"),a("ul",[a("li",[s._v("新增断点 "),a("code",{pre:!0},[s._v("xl")]),s._v("，适用于宽度大于 1920px 的视口")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("span-method")]),s._v(" 属性，用于合并行或列")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("clearSort")]),s._v(" 方法，用于清空排序状态")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("clearFilter")]),s._v(" 方法，用于清空过滤状态")]),a("li",[s._v("对于可展开行，当该行展开时会获得一个 "),a("code",{pre:!0},[s._v(".expanded")]),s._v(" 类名，方便自定义样式")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性，用于控制表格尺寸")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("toggleRowExpansion")]),s._v(" 方法，用于手动展开或关闭行")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("cell-class-name")]),s._v(" 属性，用于指定单元格的类名")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("cell-style")]),s._v(" 属性，用于指定单元格的样式")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("header-row-class-name")]),s._v(" 属性，用于指定表头行的类名")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("header-row-style")]),s._v(" 属性，用于指定表头行的样式")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("header-cell-class-name")]),s._v(" 属性，用于指定表头单元格的类名")]),a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("header-cell-style")]),s._v(" 属性，用于指定表头单元格的样式")]),a("li",[s._v("TableColumn 的 "),a("code",{pre:!0},[s._v("prop")]),s._v(" 属性支持 "),a("code",{pre:!0},[s._v("object[key]")]),s._v(" 格式")]),a("li",[s._v("TableColumn 新增 "),a("code",{pre:!0},[s._v("index")]),s._v(" 属性，用于自定义索引值")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("新增 "),a("code",{pre:!0},[s._v("reserve-keyword")]),s._v(" 属性，用于在选择某个选项后保留当前的搜索关键词")])])])]),a("h4",{attrs:{id:"xiu-fu-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修复")]),a("ul",[a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("选择周数时，"),a("code",{pre:!0},[s._v("v-model")]),s._v(" 结果返回该周第二天的问题 #6038")]),a("li",[s._v("在 "),a("code",{pre:!0},[s._v("daterange")]),s._v(" 类型中，第一次的输入会被清空的问题 #6021")])])]),a("li",[s._v("DateTimePicker\n"),a("ul",[a("li",[s._v("和 TimePicker 相互影响的问题 #6090")]),a("li",[s._v("选择时间小时和秒可超出限制的问题 #6076")])])]),a("li",[s._v("TimePicker\n"),a("ul",[a("li",[s._v("失去焦点时无法正确改变 "),a("code",{pre:!0},[s._v("v-model")]),s._v(" 值的问题 #6023")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("当含有下拉框时，下拉框的打开和关闭会造成文字虚晃的问题 #6088")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("提升性能，修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("修复 Table 在父元素从 "),a("code",{pre:!0},[s._v("display: none")]),s._v(" 变成其他状态时会隐藏的问题")]),a("li",[s._v("修复 Table 在父元素为 "),a("code",{pre:!0},[s._v("display: flex")]),s._v(" 时可能出现的宽度逐渐变大的问题")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("append")]),s._v(" 具名 slot 和固定列并存时，动态获取表格数据会导致固定列消失的问题")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("expand-row-keys")]),s._v(" 属性初始化无效的问题")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("data")]),s._v(" 改变时过滤条件失效的问题")]),a("li",[s._v("修复多级表头时固定列隐藏情况计算错误的问题")]),a("li",[s._v("修复 "),a("code",{pre:!0},[s._v("max-height")]),s._v(" 变更后无法恢复的问题")]),a("li",[s._v("修复一些样式上的计算错误")])])])]),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("综合\n"),a("ul",[a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("theme-default")])]),a("li",[s._v("最低兼容 Vue 2.5.2 和 IE 10")]),a("li",[s._v("表单组件的 "),a("code",{pre:!0},[s._v("change")]),s._v(" 事件和 Pagination 的 "),a("code",{pre:!0},[s._v("current-change")]),s._v(" 事件现在仅响应用户交互")]),a("li",[s._v("Button 和表单组件的 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性现在可接受 "),a("code",{pre:!0},[s._v("medium")]),s._v("、"),a("code",{pre:!0},[s._v("small")]),s._v(" 和 "),a("code",{pre:!0},[s._v("mini")])]),a("li",[s._v("为了方便使用第三方图标，Button 的 "),a("code",{pre:!0},[s._v("icon")]),s._v(" 属性、Input 的 "),a("code",{pre:!0},[s._v("prefix-icon")]),s._v(" 和 "),a("code",{pre:!0},[s._v("suffix-icon")]),s._v(" 属性、Steps 的 "),a("code",{pre:!0},[s._v("icon")]),s._v(" 属性现在需要传入完整的图标类名")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性。现在 Dialog 的尺寸由 "),a("code",{pre:!0},[s._v("width")]),s._v(" 和 "),a("code",{pre:!0},[s._v("fullscreen")]),s._v(" 控制")]),a("li",[s._v("移除通过 "),a("code",{pre:!0},[s._v("v-model")]),s._v(" 控制 Dialog 显示和隐藏的功能")])])]),a("li",[s._v("Rate\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("text-template")]),s._v(" 属性更名为 "),a("code",{pre:!0},[s._v("score-template")])])])]),a("li",[s._v("Dropdown\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("menu-align")]),s._v(" 属性变更为 "),a("code",{pre:!0},[s._v("placement")]),s._v("，增加更多方位属性")])])]),a("li",[s._v("Transfer\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("footer-format")]),s._v(" 属性更名为 "),a("code",{pre:!0},[s._v("format")])])])]),a("li",[s._v("Switch\n"),a("ul",[a("li",[s._v("由于 "),a("code",{pre:!0},[s._v("on-*")]),s._v(" 属性在 JSX 中会被识别为事件，导致 Switch 所有 "),a("code",{pre:!0},[s._v("on-*")]),s._v(" 属性在 JSX 中无法正常工作，所以 "),a("code",{pre:!0},[s._v("on-*")]),s._v(" 属性更名为 "),a("code",{pre:!0},[s._v("active-*")]),s._v("，对应地，"),a("code",{pre:!0},[s._v("off-*")]),s._v(" 属性更名为 "),a("code",{pre:!0},[s._v("inactive-*")]),s._v("。受到影响的属性有："),a("code",{pre:!0},[s._v("on-icon-class")]),s._v("、"),a("code",{pre:!0},[s._v("off-icon-class")]),s._v("、"),a("code",{pre:!0},[s._v("on-text")]),s._v("、"),a("code",{pre:!0},[s._v("off-text")]),s._v("、"),a("code",{pre:!0},[s._v("on-color")]),s._v("、"),a("code",{pre:!0},[s._v("off-color")]),s._v("、"),a("code",{pre:!0},[s._v("on-value")]),s._v("、"),a("code",{pre:!0},[s._v("off-value")])]),a("li",[a("code",{pre:!0},[s._v("active-text")]),s._v(" 和 "),a("code",{pre:!0},[s._v("inactive-text")]),s._v(" 属性不再有默认值")])])]),a("li",[s._v("Tag\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("type")]),s._v(" 属性现在支持 "),a("code",{pre:!0},[s._v("success")]),s._v("、"),a("code",{pre:!0},[s._v("info")]),s._v("、"),a("code",{pre:!0},[s._v("warning")]),s._v(" 和 "),a("code",{pre:!0},[s._v("danger")]),s._v(" 四个值")])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("theme")]),s._v(" 属性。现在通过 "),a("code",{pre:!0},[s._v("background-color")]),s._v("、"),a("code",{pre:!0},[s._v("text-color")]),s._v(" 和 "),a("code",{pre:!0},[s._v("active-text-color")]),s._v(" 属性进行颜色的自定义")])])]),a("li",[s._v("Input\n"),a("ul",[a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("icon")]),s._v(" 属性。现在通过 "),a("code",{pre:!0},[s._v("suffix-icon")]),s._v(" 属性或者 "),a("code",{pre:!0},[s._v("suffix")]),s._v(" 具名 slot 来加入尾部图标")]),a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("on-icon-click")]),s._v(" 属性和 "),a("code",{pre:!0},[s._v("click")]),s._v(" 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标")]),a("li",[a("code",{pre:!0},[s._v("change")]),s._v(" 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 "),a("code",{pre:!0},[s._v("input")]),s._v(" 事件")])])]),a("li",[s._v("Autocomplete\n"),a("ul",[a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("custom-item")]),s._v(" 属性。现在通过 "),a("code",{pre:!0},[s._v("scoped slot")]),s._v(" 自定义输入建议列表项的内容")]),a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("props")]),s._v(" 属性，现在使用 "),a("code",{pre:!0},[s._v("value-key")]),s._v(" 属性指定输入建议对象中用于显示的键名")])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("移除 "),a("code",{pre:!0},[s._v("center")]),s._v(" 属性")]),a("li",[s._v("现在步骤条将默认充满父容器")])])]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("change")]),s._v(" 事件参数现在为组件的绑定值，格式由 "),a("code",{pre:!0},[s._v("value-format")]),s._v(" 控制")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("移除通过 "),a("code",{pre:!0},[s._v("inline-template")]),s._v(" 自定义列模板的功能")]),a("li",[a("code",{pre:!0},[s._v("sort-method")]),s._v(" 现在和 "),a("code",{pre:!0},[s._v("Array.sort")]),s._v(" 保持一致的逻辑，要求返回一个数字")]),a("li",[s._v("将 "),a("code",{pre:!0},[s._v("append")]),s._v(" slot 移至 "),a("code",{pre:!0},[s._v("tbody")]),s._v(" 元素以外，以保证其只被渲染一次")]),a("li",[a("code",{pre:!0},[s._v("expand")]),s._v(" 事件更名为 "),a("code",{pre:!0},[s._v("expand-change")]),s._v("，以保证 API 的命名一致性")]),a("li",[a("code",{pre:!0},[s._v("row-class-name")]),s._v(" 和 "),a("code",{pre:!0},[s._v("row-style")]),s._v(" 的函数参数改为对象，以保证 API 的一致性")])])])]),a("h2",{attrs:{id:""}},[a("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[s._v("¶")])]),a("p",[a("i",[a("sup",[s._v("*")]),s._v(" 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS 攻击")]),s._v("。因此请在 "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" 打开的情况下，确保 "),a("code",{pre:!0},[s._v("message")]),s._v(" 的内容是可信的，"),a("strong",[s._v("永远不要")]),s._v("将用户提交的内容赋值给 "),a("code",{pre:!0},[s._v("message")]),s._v(" 属性。")])])])}],!1,null,null,null);r.options.__file="CHANGELOG.zh-CN.md";var l={components:{ChangeLog:r.exports},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 e=t[1].textContent.trim(),r='

  • '+e+"

    ",l=t.length,n=2;n

  • '+e+"

    "}r=(r=r.replace(/#(\d+)/g,'#$1')).replace(/@(\w+)/g,'@$1'),this.$refs.timeline.innerHTML=r+"
    • ",s.$el.remove()}},n=(a(385),Object(e.a)(l,function(){var s=this.$createElement,t=this._self._c||s;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n 更新日志\n ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));n.options.__file="changelog.vue";t.default=n.exports},,,,,,,,,,,,,,,,,,,,,,,,function(s,t,a){"use strict";a.r(t);var e={data:function(){return{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"}],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"}],fileList3:[{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"}],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)},handleExceed:function(s,t){this.$message.warning("当前限制选择 3 个文件，本次选择了 "+s.length+" 个文件，共选择了 "+(s.length+t.length)+" 个文件")},beforeRemove:function(s,t){return this.$confirm("确定移除 "+s.name+"？")}}},r=(a(454),a(0)),l=Object(r.a)(e,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:'\n 点击上传\n
    只能上传jpg/png文件，且不超过500kb
    \n    \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 handleExceed(files, fileList) {\n this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);\n },\n beforeRemove(file, fileList) {\n return this.$confirm(`确定移除 ${ file.name }？`);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"before-remove":s.beforeRemove,multiple:"",limit:3,"on-exceed":s.handleExceed,"file-list":s.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("点击上传")]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("p",[s._v("通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置"),a("code",[s._v("limit")]),s._v("和"),a("code",[s._v("on-exceed")]),s._v("来限制上传文件的个数和定义超出限制时的行为。可通过设置"),a("code",[s._v("before-remove")]),s._v("来阻止文件移除操作。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handlePreview"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":before-remove")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"beforeRemove"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":limit")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-exceed")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleExceed"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fileList"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("点击上传"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fileList")]),s._v(": [{"),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{pre:!0,attrs:{class:"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",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file);\n },\n handleExceed(files, fileList) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.warning("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`当前限制选择 3 个文件，本次选择了 "),a("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${files.length}")]),s._v(" 个文件，共选择了 "),a("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${files.length + fileList.length}")]),s._v(" 个文件`")]),s._v(");\n },\n beforeRemove(file, fileList) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`确定移除 "),a("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${ file.name }")]),s._v("？`")]),s._v(");\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n\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: #409EFF;\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"avatar-uploader"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":show-file-list")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-success")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleAvatarSuccess"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":before-upload")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"beforeAvatarUpload"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"imageUrl"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"imageUrl"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"avatar"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-else")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-plus avatar-uploader-icon"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-upload")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1px")]),s._v(" dashed "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#d9d9d9")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("position")]),s._v(": relative;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("overflow")]),s._v(": hidden;\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-upload")]),a("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":hover")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader-icon")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("28px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#8c939d")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".avatar")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": block;\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("imageUrl")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleAvatarSuccess(res, file) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".imageUrl = URL.createObjectURL(file.raw);\n },\n beforeAvatarUpload(file) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" isJPG = file.type === "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'image/jpeg'")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" isLt2M = file.size / "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" / "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" < "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(";\n\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!isJPG) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上传头像图片只能是 JPG 格式!'")]),s._v(");\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!isLt2M) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上传头像图片大小不能超过 2MB!'")]),s._v(");\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" isJPG && isLt2M;\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n\n\n \n\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",attrs:{slot:"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:{visible:s.dialogVisible},on:{"update:visible":function(t){s.dialogVisible=t}}},[a("img",{attrs:{width:"100%",src:s.dialogImageUrl,alt:""}})])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("list-type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"picture-card"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handlePictureCardPreview"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-plus"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogVisible"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100%"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogImageUrl"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("alt")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dialogImageUrl")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dialogVisible")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePictureCardPreview(file) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dialogVisible = "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n 点击上传\n
    只能上传jpg/png文件，且不超过500kb
    \n    \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",attrs:{slot:"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",attrs:{slot:"tip"},slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handlePreview"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fileList2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("list-type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"picture"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("点击上传"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fileList2")]),s._v(": [{"),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{pre:!0,attrs:{class:"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",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file);\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n 点击上传\n
    只能上传jpg/png文件，且不超过500kb
    \n    \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 }, {\n name: 'food2.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'\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",attrs:{slot:"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",attrs:{slot:"tip"},slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fileList3"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("点击上传"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fileList3")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("\n }]\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(file, fileList) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fileList3 = fileList.slice("),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-3")]),s._v(");\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    将文件拖到此处，或点击上传
    \n
    只能上传jpg/png文件，且不超过500kb
    \n    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"tip"},slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("drag")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-upload__text"')]),s._v(">")]),s._v("将文件拖到此处，或"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("em")]),s._v(">")]),s._v("点击上传"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n 选取文件\n 上传到服务器\n
    只能上传jpg/png文件，且不超过500kb
    \n    \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",attrs:{slot:"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:{slot:"trigger",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",attrs:{slot:"tip"},slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handlePreview"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fileList"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":auto-upload")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"trigger"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("选取文件"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-left: 10px;"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"submitUpload"')]),s._v(">")]),s._v("上传到服务器"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fileList")]),s._v(": [{"),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{pre:!0,attrs:{class:"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",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitUpload() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.upload.submit();\n },\n handleRemove(file, fileList) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file);\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"upload-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Upload 上传")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dian-ji-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-ji-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 点击上传")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"yong-hu-tou-xiang-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yong-hu-tou-xiang-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 用户头像上传")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("使用 "),t("code",{pre:!0},[this._v("before-upload")]),this._v(" 限制用户上传的图片格式和大小。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zhao-pian-qiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhao-pian-qiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 照片墙")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("使用 "),t("code",{pre:!0},[this._v("list-type")]),this._v(" 属性来设置文件列表的样式。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"tu-pian-lie-biao-suo-lue-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-pian-lie-biao-suo-lue-tu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图片列表缩略图")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shang-chuan-wen-jian-lie-biao-kong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shang-chuan-wen-jian-lie-biao-kong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 上传文件列表控制")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("通过 "),t("code",{pre:!0},[this._v("on-change")]),this._v(" 钩子函数来对列表进行控制")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"tuo-zhuai-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tuo-zhuai-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 拖拽上传")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shou-dong-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-dong-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手动上传")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attribute","aria-hidden":"true"}},[this._v("¶")]),this._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("点击文件列表中已上传的文件时的钩子")]),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 且被 reject，则停止上传。")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-remove")]),a("td",[s._v("删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。")]),a("td",[s._v("function(file, fileList)")]),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.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),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")])]),a("tr",[a("td",[s._v("limit")]),a("td",[s._v("最大允许上传个数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-exceed")]),a("td",[s._v("文件超出个数限制时的钩子")]),a("td",[s._v("function(files, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("-")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("trigger")]),t("td",[this._v("触发文件选择框的内容")])]),t("tr",[t("td",[this._v("tip")]),t("td",[this._v("提示说明文字")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._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("清空已上传的文件列表（该方法不支持在 before-upload 中调用）")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("abort")]),a("td",[s._v("取消上传请求")]),a("td",[s._v("（ file: fileList 中的 file 对象 ）")])]),a("tr",[a("td",[s._v("submit")]),a("td",[s._v("手动上传文件列表")]),a("td",[s._v("—")])])])])}],!1,null,null,null);l.options.__file="upload.md";t.default=l.exports},,function(s,t,a){"use strict";a.r(t);var e=[{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"}]}]}],r=[{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"}]}],l=[{id:1,label:"一级 2",children:[{id:3,label:"二级 2-1",children:[{id:4,label:"三级 3-1-1"},{id:5,label:"三级 3-1-2",disabled:!0}]},{id:2,label:"二级 2-2",disabled:!0,children:[{id:6,label:"三级 3-2-1"},{id:7,label:"三级 3-2-2",disabled:!0}]}]}],n=[{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",children:[{id:11,label:"三级 3-2-1"},{id:12,label:"三级 3-2-2"},{id:13,label:"三级 3-2-3"}]}]}],v=1e3,p=[{name:"region1"},{name:"region2"}],_=1,c={label:"name",children:"zones"},i={label:"name",children:"zones",isLeaf:"leaf"},h={children:"children",label:"label"},o={watch:{filterText:function(s){this.$refs.tree2.filter(s)}},methods:{handleCheckChange:function(s,t,a){console.log(s,t,a)},handleNodeClick:function(s){console.log(s)},handleDragStart:function(s,t){console.log("drag start",s)},handleDragEnter:function(s,t,a){console.log("tree drag enter: ",t.label)},handleDragLeave:function(s,t,a){console.log("tree drag leave: ",t.label)},handleDragOver:function(s,t,a){console.log("tree drag over: ",t.label)},handleDragEnd:function(s,t,a,e){console.log("tree drag end: ",t&&t.label,a)},handleDrop:function(s,t,a,e){console.log("tree drop: ",t.label,a)},allowDrop:function(s,t,a){return"二级 3-1"!==t.data.label||"inner"!==a},allowDrag:function(s){return-1===s.data.label.indexOf("三级 3-2-2")},loadNode:function(s,t){return 0===s.level?t([{name:"region1"},{name:"region2"}]):s.level>3?t([]):(a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,void setTimeout(function(){var s;s=a?[{name:"zone"+_++},{name:"zone"+_++}]:[],t(s)},500));var a},loadNode1:function(s,t){return 0===s.level?t([{name:"region"}]):s.level>1?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},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){var t={id:v++,label:"testtest",children:[]};s.children||this.$set(s,"children",[]),s.children.push(t)},remove:function(s,t){var a=s.parent,e=a.data.children||a.data,r=e.findIndex(function(s){return s.id===t.id});e.splice(r,1)},renderContent:function(s,t){var a=this,e=t.node,r=t.data;return s("span",{class:"custom-tree-node"},[s("span",[e.label]),s("span",[s("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return a.append(r)}}},["Append"]),s("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return a.remove(e,r)}}},["Delete"])])])},filterNode:function(s,t){return!s||-1!==t.label.indexOf(s)}},data:function(){return{data:e,data2:r,data3:l,data4:JSON.parse(JSON.stringify(r)),data5:JSON.parse(JSON.stringify(r)),data6:n,regions:p,defaultProps:h,props:c,props1:i,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}},d=(a(452),a(0)),j=Object(d.a)(o,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:'\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",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleNodeClick"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 1-1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 1-1-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 2-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 2-2-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 3'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 3-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 3-2-1'")]),s._v("\n }]\n }]\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleNodeClick(data) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("适用于需要选择层级时使用。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\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",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("p",[s._v("本例还展示了动态加载节点数据的方法。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":load")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"loadNode"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lazy")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@check-change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'name'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zones'")]),s._v("\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("count")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleCheckChange(data, checked, indeterminate) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n },\n loadNode(node, resolve) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([{ "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'region1'")]),s._v(" }, { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'region2'")]),s._v(" }]);\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level > "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(") "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([]);\n\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" hasChild;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.data.name === "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'region1'")]),s._v(") {\n hasChild = "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.data.name === "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'region2'")]),s._v(") {\n hasChild = "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n hasChild = "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".random() > "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.5")]),s._v(";\n }\n\n setTimeout("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" data;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (hasChild) {\n data = [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v(" + "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".count++\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v(" + "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".count++\n }];\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n data = [];\n }\n\n resolve(data);\n }, "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("500")]),s._v(");\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n props1: {\n label: 'name',\n children: 'zones',\n isLeaf: 'leaf'\n },\n };\n },\n methods: {\n loadNode1(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'region' }]);\n }\n if (node.level > 1) return resolve([]);\n\n setTimeout(() => {\n const data = [{\n name: 'leaf',\n leaf: true\n }, {\n name: 'zone'\n }];\n\n resolve(data);\n }, 500);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{props:s.props1,load:s.loadNode1,lazy:"","show-checkbox":""}})],1),a("p",[s._v("由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"props1"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":load")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"loadNode1"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lazy")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("props1")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'name'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zones'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("isLeaf")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'leaf'")]),s._v("\n },\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n loadNode1(node, resolve) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([{ "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'region'")]),s._v(" }]);\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level > "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(") "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([]);\n\n setTimeout("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'leaf'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("leaf")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v("\n }];\n\n resolve(data);\n }, "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("500")]),s._v(");\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可将 Tree 的某些节点设置为默认展开或默认选中")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-expanded-keys")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[2, 3]"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-checked-keys")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[5]"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 1-1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 1-1-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 3'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-2'")]),s._v("\n }]\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("可将 Tree 的某些节点设置为禁用状态")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n data3: [{\n id: 1,\n label: '一级 2',\n children: [{\n id: 3,\n label: '二级 2-1',\n children: [{\n id: 4,\n label: '三级 3-1-1'\n }, {\n id: 5,\n label: '三级 3-1-2',\n disabled: true\n }]\n }, {\n id: 2,\n label: '二级 2-2',\n disabled: true,\n children: [{\n id: 6,\n label: '三级 3-2-1'\n }, {\n id: 7,\n label: '三级 3-2-2',\n disabled: true\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data3,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5]}})],1),a("p",[s._v("通过"),a("code",[s._v("disabled")]),s._v("设置禁用状态。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-expanded-keys")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[2, 3]"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-checked-keys")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[5]"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data3")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 3-1-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 3-1-2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 3-2-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 3-2-2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }]\n }]\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n
    \n 通过 node 获取\n 通过 key 获取\n 通过 node 设置\n 通过 key 设置\n 清空\n
    \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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tree"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("highlight-current")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"buttons"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"getCheckedNodes"')]),s._v(">")]),s._v("通过 node 获取"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"getCheckedKeys"')]),s._v(">")]),s._v("通过 key 获取"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"setCheckedNodes"')]),s._v(">")]),s._v("通过 node 设置"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"setCheckedKeys"')]),s._v(">")]),s._v("通过 key 设置"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"resetChecked"')]),s._v(">")]),s._v("清空"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n getCheckedNodes() {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.getCheckedNodes());\n },\n getCheckedKeys() {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.getCheckedKeys());\n },\n setCheckedNodes() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedNodes([{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 1-1-1'")]),s._v("\n }]);\n },\n setCheckedKeys() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys(["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v("]);\n },\n resetChecked() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys([]);\n }\n },\n\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 1-1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 1-1-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 3'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-2'")]),s._v("\n }]\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("节点的内容支持自定义，可以在节点区添加按钮或图标等内容")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n
    \n

    使用 render-content

    \n \n \n
    \n
    \n

    使用 scoped slot

    \n \n \n {{ node.label }}\n \n \n Append\n \n \n Delete\n \n \n \n \n
    \n
    \n\n\n\n\n',script:"\n let id = 1000;\n\n export default {\n data() {\n const data = [{\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 return {\n data4: JSON.parse(JSON.stringify(data)),\n data5: JSON.parse(JSON.stringify(data))\n }\n },\n\n methods: {\n append(data) {\n const newChild = { id: id++, label: 'testtest', children: [] };\n if (!data.children) {\n this.$set(data, 'children', []);\n }\n data.children.push(newChild);\n },\n\n remove(node, data) {\n const parent = node.parent;\n const children = parent.data.children || parent.data;\n const index = children.findIndex(d => d.id === data.id);\n children.splice(index, 1);\n },\n\n renderContent(h, { node, data, store }) {\n return (\n \n {node.label}\n \n this.append(data) }>Append\n this.remove(node, data) }>Delete\n \n );\n }\n }\n };\n",style:"\n .custom-tree-node {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n padding-right: 8px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"custom-tree-container"},[a("div",{staticClass:"block"},[a("p",[s._v("使用 render-content")]),a("el-tree",{attrs:{data:s.data4,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),a("div",{staticClass:"block"},[a("p",[s._v("使用 scoped slot")]),a("el-tree",{attrs:{data:s.data5,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:s._u([{key:"default",fn:function(t){var e=t.node,r=t.data;return a("span",{staticClass:"custom-tree-node"},[a("span",[s._v(s._s(e.label))]),a("span",[a("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return s.append(r)}}},[s._v("\n Append\n ")]),a("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return s.remove(e,r)}}},[s._v("\n Delete\n ")])],1)])}}])})],1)])]),a("p",[s._v("可以通过两种方法进行树节点内容的自定义："),a("code",[s._v("render-content")]),s._v("和 scoped slot。使用"),a("code",[s._v("render-content")]),s._v("指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数"),a("code",[s._v("node")]),s._v("和"),a("code",[s._v("data")]),s._v("，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持 JSX 语法，所以"),a("code",[s._v("render-content")]),s._v("示例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"custom-tree-container"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("使用 render-content"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data4"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":expand-on-click-node")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":render-content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"renderContent"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("使用 scoped slot"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data5"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":expand-on-click-node")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"custom-tree-node"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"{ node, data }"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{{ node.label }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"() => append(data)"')]),s._v(">")]),s._v("\n Append\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"() => remove(node, data)"')]),s._v(">")]),s._v("\n Delete\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"actionscript"}},[s._v("\n let id = "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(";\n\n export "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [{\n id: "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n label: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 1'")]),s._v(",\n children: [{\n id: "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n label: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 1-1'")]),s._v(",\n children: [{\n id: "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n label: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 1-1-1'")]),s._v("\n }, {\n id: "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n label: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 1-1-2'")]),s._v("\n }]\n }]\n }, {\n id: "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n label: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 2'")]),s._v(",\n children: [{\n id: "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n label: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-1'")]),s._v("\n }, {\n id: "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n label: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-2'")]),s._v("\n }]\n }, {\n id: "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n label: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 3'")]),s._v(",\n children: [{\n id: "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n label: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-1'")]),s._v("\n }, {\n id: "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n label: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-2'")]),s._v("\n }]\n }];\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n data4: JSON.parse(JSON.stringify(data)),\n data5: JSON.parse(JSON.stringify(data))\n }\n },\n\n methods: {\n append(data) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" newChild = { id: id++, label: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'testtest'")]),s._v(", children: [] };\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!data.children) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("set")]),s._v("(data, "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(", []);\n }\n data.children.push(newChild);\n },\n\n remove(node, data) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" parent = node.parent;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" children = parent.data.children || parent.data;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" index = children.findIndex(d => d.id === data.id);\n children.splice(index, "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n },\n\n renderContent(h, { node, data, store }) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (\n \n <'),a("span",{pre:!0,attrs:{class:"hljs-title"}},[s._v("span")]),s._v(">")]),s._v("{node.label}\n \n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".append(data) }>Append\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".remove(node, data) }>Delete\n \n );\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".custom-tree-node")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("flex")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": flex;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("align-items")]),s._v(": center;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("justify-content")]),s._v(": space-between;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding-right")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8px")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("通过关键字过滤树节点")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"输入关键字进行过滤"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"filterText"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"filter-tree"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":filter-node-method")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"filterNode"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tree2"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("watch")]),s._v(": {\n filterText(val) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree2.filter(val);\n }\n },\n\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n filterNode(value, data) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!value) "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data.label.indexOf(value) !== "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n }\n },\n\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterText")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 1-1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 1-1-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 3'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-2'")]),s._v("\n }]\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("对于同一级的节点，每次只能展开一个")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps,accordion:""},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleNodeClick"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 1-1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 1-1-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 2-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 2-2-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 3'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 3-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 3-2-1'")]),s._v("\n }]\n }]\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleNodeClick(data) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("通过 draggable 属性可让节点变为可拖拽。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n data6: [{\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 children: [{\n id: 11,\n label: '三级 3-2-1'\n }, {\n id: 12,\n label: '三级 3-2-2'\n }, {\n id: 13,\n label: '三级 3-2-3'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleDragStart(node, ev) {\n console.log('drag start', node);\n },\n handleDragEnter(draggingNode, dropNode, ev) {\n console.log('tree drag enter: ', dropNode.label);\n },\n handleDragLeave(draggingNode, dropNode, ev) {\n console.log('tree drag leave: ', dropNode.label);\n },\n handleDragOver(draggingNode, dropNode, ev) {\n console.log('tree drag over: ', dropNode.label);\n },\n handleDragEnd(draggingNode, dropNode, dropType, ev) {\n console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n },\n handleDrop(draggingNode, dropNode, dropType, ev) {\n console.log('tree drop: ', dropNode.label, dropType);\n },\n allowDrop(draggingNode, dropNode, type) {\n if (dropNode.data.label === '二级 3-1') {\n return type !== 'inner';\n } else {\n return true;\n }\n },\n allowDrag(draggingNode) {\n return draggingNode.data.label.indexOf('三级 3-2-2') === -1;\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data6,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":s.allowDrop,"allow-drag":s.allowDrag},on:{"node-drag-start":s.handleDragStart,"node-drag-enter":s.handleDragEnter,"node-drag-leave":s.handleDragLeave,"node-drag-over":s.handleDragOver,"node-drag-end":s.handleDragEnd,"node-drop":s.handleDrop}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data6"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-drag-start")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDragStart"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-drag-enter")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDragEnter"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-drag-leave")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDragLeave"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-drag-over")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDragOver"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-drag-end")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDragEnd"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@node-drop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDrop"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("draggable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":allow-drop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"allowDrop"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":allow-drag")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"allowDrag"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data6")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 1-1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 1-1-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一级 3'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("11")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 3-2-1'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 3-2-2'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("13")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 3-2-3'")]),s._v("\n }]\n }]\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleDragStart(node, ev) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'drag start'")]),s._v(", node);\n },\n handleDragEnter(draggingNode, dropNode, ev) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree drag enter: '")]),s._v(", dropNode.label);\n },\n handleDragLeave(draggingNode, dropNode, ev) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree drag leave: '")]),s._v(", dropNode.label);\n },\n handleDragOver(draggingNode, dropNode, ev) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree drag over: '")]),s._v(", dropNode.label);\n },\n handleDragEnd(draggingNode, dropNode, dropType, ev) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree drag end: '")]),s._v(", dropNode && dropNode.label, dropType);\n },\n handleDrop(draggingNode, dropNode, dropType, ev) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree drop: '")]),s._v(", dropNode.label, dropType);\n },\n allowDrop(draggingNode, dropNode, type) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (dropNode.data.label === "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'二级 3-1'")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" type !== "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'inner'")]),s._v(";\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n }\n },\n allowDrag(draggingNode) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" draggingNode.data.label.indexOf("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'三级 3-2-2'")]),s._v(") === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[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),s._m(19),s._m(20),s._m(21)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"tree-shu-xing-kong-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-shu-xing-kong-jian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree 树形控件")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ke-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可选择")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"lan-jia-zai-zi-ding-yi-xie-zi-jie-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lan-jia-zai-zi-ding-yi-xie-zi-jie-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 懒加载自定义叶子节点")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"mo-ren-zhan-kai-he-mo-ren-xuan-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhan-kai-he-mo-ren-xuan-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认展开和默认选中")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shu-jie-dian-de-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-jie-dian-de-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 树节点的选择")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi-jie-dian-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-jie-dian-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义节点内容")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jie-dian-guo-lu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-dian-guo-lu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 节点过滤")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shou-feng-qin-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-mo-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手风琴模式")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ke-tuo-zhuai-jie-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-tuo-zhuai-jie-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可拖拽节点")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("render-after-expand")]),a("td",[s._v("是否在第一次展开某个树节点后才渲染其子节点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("load")]),a("td",[s._v("加载子树数据的方法，仅当 lazy 属性为true 时生效")]),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, data, store }")]),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("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("check-on-click-node")]),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("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("current-node-key")]),a("td",[s._v("当前选中的节点")]),a("td",[s._v("string, number")]),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")])]),a("tr",[a("td",[s._v("icon-class")]),a("td",[s._v("自定义树节点的图标")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("lazy")]),a("td",[s._v("是否懒加载子节点，需与 load 方法结合使用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("draggable")]),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-drag")]),a("td",[s._v("判断节点能否被拖拽")]),a("td",[s._v("Function(node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("allow-drop")]),a("td",[s._v("拖拽时判定目标节点能否被放置。"),a("code",{pre:!0},[s._v("type")]),s._v(" 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后")]),a("td",[s._v("Function(draggingNode, dropNode, type)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._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, function(data, node)")]),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("boolean, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("isLeaf")]),a("td",[s._v("指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效")]),a("td",[s._v("boolean, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[t("code",{pre:!0},[this._v("Tree")]),this._v(" 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。\n"),t("code",{pre:!0},[this._v("Tree")]),this._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("updateKeyChildren")]),a("td",[s._v("通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组")])]),a("tr",[a("td",[s._v("getCheckedNodes")]),a("td",[s._v("若节点可被选择（即 "),a("code",{pre:!0},[s._v("show-checkbox")]),s._v(" 为 "),a("code",{pre:!0},[s._v("true")]),s._v("），则返回目前被选中的节点所组成的数组")]),a("td",[s._v("(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 "),a("code",{pre:!0},[s._v("false")]),s._v(" 2. 是否包含半选节点，默认值为 "),a("code",{pre:!0},[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",{pre:!0},[s._v("show-checkbox")]),s._v(" 为 "),a("code",{pre:!0},[s._v("true")]),s._v("），则返回目前被选中的节点的 key 所组成的数组")]),a("td",[s._v("(leafOnly) 接收一个 boolean 类型的参数，若为 "),a("code",{pre:!0},[s._v("true")]),s._v(" 则仅返回被选中的叶子节点的 keys，默认值为 "),a("code",{pre:!0},[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",{pre:!0},[s._v("true")]),s._v(" 则仅设置叶子节点的选中状态，默认值为 "),a("code",{pre:!0},[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")])]),a("tr",[a("td",[s._v("getHalfCheckedNodes")]),a("td",[s._v("若节点可被选择（即 "),a("code",{pre:!0},[s._v("show-checkbox")]),s._v(" 为 "),a("code",{pre:!0},[s._v("true")]),s._v("），则返回目前半选中的节点所组成的数组")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("getHalfCheckedKeys")]),a("td",[s._v("若节点可被选择（即 "),a("code",{pre:!0},[s._v("show-checkbox")]),s._v(" 为 "),a("code",{pre:!0},[s._v("true")]),s._v("），则返回目前半选中的节点的 key 所组成的数组")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("getCurrentKey")]),a("td",[s._v("获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("getCurrentNode")]),a("td",[s._v("获取当前被选中节点的 data，若没有节点被选中则返回 null")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("setCurrentKey")]),a("td",[s._v("通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(key) 待被选节点的 key，若为 null 则取消当前高亮的节点")])]),a("tr",[a("td",[s._v("setCurrentNode")]),a("td",[s._v("通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(node) 待被选节点的 node")])]),a("tr",[a("td",[s._v("getNode")]),a("td",[s._v("根据 data 或者 key 拿到 Tree 组件中的 node")]),a("td",[s._v("(data) 要获得 node 的 key 或者 data")])]),a("tr",[a("td",[s._v("remove")]),a("td",[s._v("删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(data) 要删除的节点的 data 或者 node")])]),a("tr",[a("td",[s._v("append")]),a("td",[s._v("为 Tree 中的一个节点追加一个子节点")]),a("td",[s._v("(data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node")])]),a("tr",[a("td",[s._v("insertBefore")]),a("td",[s._v("为 Tree 的一个节点的前面增加一个节点")]),a("td",[s._v("(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node")])]),a("tr",[a("td",[s._v("insertAfter")]),a("td",[s._v("为 Tree 的一个节点的后面增加一个节点")]),a("td",[s._v("(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._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",{pre:!0},[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),a("tr",[a("td",[s._v("node-contextmenu")]),a("td",[s._v("当某一节点被鼠标右键点击时会触发该事件")]),a("td",[s._v("共四个参数，依次为：event、传递给 "),a("code",{pre:!0},[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),a("tr",[a("td",[s._v("check-change")]),a("td",[s._v("节点选中状态发生变化时的回调")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",{pre:!0},[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点")])]),a("tr",[a("td",[s._v("check")]),a("td",[s._v("当复选框被点击的时候触发")]),a("td",[s._v("共两个参数，依次为：传递给 "),a("code",{pre:!0},[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性")])]),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",{pre:!0},[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身")])]),a("tr",[a("td",[s._v("node-collapse")]),a("td",[s._v("节点被关闭时触发的事件")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",{pre:!0},[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身")])]),a("tr",[a("td",[s._v("node-drag-start")]),a("td",[s._v("节点开始拖拽时触发的事件")]),a("td",[s._v("共两个参数，依次为：被拖拽节点对应的 Node、event")])]),a("tr",[a("td",[s._v("node-drag-enter")]),a("td",[s._v("拖拽进入其他节点时触发的事件")]),a("td",[s._v("共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event")])]),a("tr",[a("td",[s._v("node-drag-leave")]),a("td",[s._v("拖拽离开某个节点时触发的事件")]),a("td",[s._v("共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event")])]),a("tr",[a("td",[s._v("node-drag-over")]),a("td",[s._v("在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）")]),a("td",[s._v("共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event")])]),a("tr",[a("td",[s._v("node-drag-end")]),a("td",[s._v("拖拽结束时（可能未成功）触发的事件")]),a("td",[s._v("共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event")])]),a("tr",[a("td",[s._v("node-drop")]),a("td",[s._v("拖拽成功完成时触发的事件")]),a("td",[s._v("共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("自定义树节点的内容，参数为 { node, data }")])])])])}],!1,null,null,null);j.options.__file="tree.md";t.default=j.exports},function(s,t,a){"use strict";a.r(t);var e={data:function(){this.$createElement;return{data:function(s){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"备选项 "+a,disabled:a%4==0});return t}(),data2:function(s){var t=[],a=["shanghai","beijing","guangzhou","shenzhen","nanjing","xian","chengdu"];return["上海","北京","广州","深圳","南京","西安","成都"].forEach(function(s,e){t.push({label:s,key:e,pinyin:a[e]})}),t}(),data3:function(s){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"备选项 "+a,disabled:a%4==0});return t}(),value1:[1,4],value2:[],value3:[1],value4:[1],value5:[],filterMethod:function(s,t){return t.pinyin.indexOf(s)>-1},renderFunc:function(s,t){return s("span",[t.key," - ",t.label])}}},methods:{handleChange:function(s,t,a){console.log(s,t,a)}}},r=(a(449),a(0)),l=Object(r.a)(e,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:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData = "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": i,\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`备选项 "),a("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": generateData(),\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v("]\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("在数据很多的情况下，可以对数据进行搜索和过滤。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":filter-method")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"filterMethod"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filter-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入城市拼音"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData2 = "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cities = ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'北京'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'广州'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'深圳'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'南京'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'西安'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'成都'")]),s._v("];\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" pinyin = ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'shanghai'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'beijing'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'guangzhou'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'shenzhen'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'nanjing'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'xian'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'chengdu'")]),s._v("];\n cities.forEach("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("city, index")]),s._v(") =>")]),s._v(" {\n data.push({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": city,\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": index,\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pinyin")]),s._v(": pinyin[index]\n });\n });\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": generateData2(),\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": [],\n filterMethod(query, item) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" item.pinyin.indexOf(query) > "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n }\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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 value4: [1],\n renderFunc(h, option) {\n return { option.key } - { option.label };\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",attrs:{slot:"source"},slot:"source"},[[a("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[s._v("使用 render-content 自定义数据项")]),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":s.renderFunc,titles:["Source","Target"],"button-texts":["到左边","到右边"],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:{slot:"left-footer",size:"small"},slot:"left-footer"},[s._v("操作")]),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[s._v("操作")])],1)],1),a("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[s._v("使用 scoped-slot 自定义数据项")]),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["到左边","到右边"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s.data},on:{change:s.handleChange},scopedSlots:s._u([{key:"default",fn:function(t){var e=t.option;return a("span",{},[s._v(s._s(e.key)+" - "+s._s(e.label))])}}]),model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[s._v("操作")]),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[s._v("操作")])],1)],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("format")]),s._v(" 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。数据项的渲染还可以使用 "),a("code",[s._v("scoped-slot")]),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 语法，所以使用 "),a("code",[s._v("render-content")]),s._v(" 自定义数据项的例子在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: center; margin: 0 0 20px"')]),s._v(">")]),s._v("使用 render-content 自定义数据项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: center"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: left; display: inline-block"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":left-default-checked")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[2, 3]"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":right-default-checked")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[1]"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":render-content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"renderFunc"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":titles")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['Source', 'Target']\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":button-texts")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['到左边', '到右边']\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":format")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n noChecked: '${total}',\n hasChecked: '${checked}/${total}'\n }\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transfer-footer"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left-footer"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("操作"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transfer-footer"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right-footer"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("操作"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: center; margin: 50px 0 20px"')]),s._v(">")]),s._v("使用 scoped-slot 自定义数据项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: center"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: left; display: inline-block"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":left-default-checked")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[2, 3]"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":right-default-checked")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[1]"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":titles")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['Source', 'Target']\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":button-texts")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['到左边', '到右边']\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":format")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n noChecked: '${total}',\n hasChecked: '${checked}/${total}'\n }\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"{ option }"')]),s._v(">")]),s._v("{{ option.key }} - {{ option.label }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transfer-footer"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left-footer"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("操作"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transfer-footer"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right-footer"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("操作"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".transfer-footer")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("6px")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5px")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData = "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": i,\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`备选项 "),a("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": generateData(),\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("],\n renderFunc(h, option) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"xml"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{ option.key } - { option.label }"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")])]),s._v(";\n }\n };\n },\n\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value, direction, movedKeys) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value, direction, movedKeys);\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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 value5: []\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:s.data3},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})]],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n key: 'value',\n label: 'desc'\n }\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"data3"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData3 = "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": i,\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`备选项 "),a("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data3")]),s._v(": generateData3(),\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": []\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[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),s._m(14),s._m(15)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"transfer-chuan-suo-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer-chuan-suo-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer 穿梭框")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ke-zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可自定义")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shu-ju-xiang-shu-xing-bie-ming"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-ju-xiang-shu-xing-bie-ming","aria-hidden":"true"}},[this._v("¶")]),this._v(" 数据项属性别名")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("默认情况下，Transfer 仅能识别数据项中的 "),a("code",{pre:!0},[s._v("key")]),s._v("、"),a("code",{pre:!0},[s._v("label")]),s._v(" 和 "),a("code",{pre:!0},[s._v("disabled")]),s._v(" 字段。如果你的数据的字段名不同，可以使用 "),a("code",{pre:!0},[s._v("props")]),s._v(" 属性为它们设置别名。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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 / v-model")]),a("td",[s._v("绑定值")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),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("target-order")]),a("td",[s._v("右侧列表元素的排序策略：若为 "),a("code",{pre:!0},[s._v("original")]),s._v("，则保持与数据源相同的顺序；若为 "),a("code",{pre:!0},[s._v("push")]),s._v("，则新加入的元素排在最后；若为 "),a("code",{pre:!0},[s._v("unshift")]),s._v("，则新加入的元素排在最前")]),a("td",[s._v("string")]),a("td",[s._v("original / push / unshift")]),a("td",[s._v("original")])]),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("format")]),a("td",[s._v("列表顶部勾选状态文案")]),a("td",[s._v("object{noChecked, hasChecked}")]),a("td",[s._v("—")]),a("td",[s._v("{ noChecked: '${checked}/${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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("left-footer")]),t("td",[this._v("左侧列表底部的内容")])]),t("tr",[t("td",[this._v("right-footer")]),t("td",[this._v("右侧列表底部的内容")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("自定义数据项的内容，参数为 { option }")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("clearQuery")]),t("td",[this._v("清空某个面板的搜索关键词")]),t("td",[this._v("'left' / 'right'，指定需要清空的面板")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._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 数组")])]),a("tr",[a("td",[s._v("left-check-change")]),a("td",[s._v("左侧列表元素被用户选中 / 取消选中时触发")]),a("td",[s._v("当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组")])]),a("tr",[a("td",[s._v("right-check-change")]),a("td",[s._v("右侧列表元素被用户选中 / 取消选中时触发")]),a("td",[s._v("当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组")])])])])}],!1,null,null,null);l.options.__file="transfer.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={data:function(){return{disabled:!1}}},r=(a(448),a(0)),l=Object(r.a)(e,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:'
    \n
    \n \n 上左\n \n \n 上边\n \n \n 上右\n \n
    \n
    \n \n 左上\n \n \n 左边\n \n \n 左下\n \n
    \n\n
    \n \n 右上\n \n \n 右边\n \n \n 右下\n \n
    \n
    \n \n 下左\n \n \n 下边\n \n \n 下右\n \n
    \n
    \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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"box"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Top Left 提示文字"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top-start"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("上左"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Top Center 提示文字"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("上边"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Top Right 提示文字"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top-end"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("上右"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Left Top 提示文字"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left-start"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("左上"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Left Center 提示文字"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("左边"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Left Bottom 提示文字"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left-end"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("左下"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Right Top 提示文字"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right-start"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("右上"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Right Center 提示文字"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("右边"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Right Bottom 提示文字"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right-end"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("右下"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Bottom Left 提示文字"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("下左"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Bottom Center 提示文字"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("下边"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Bottom Right 提示文字"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("下右"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"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",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Dark\n\n\n Light\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Top center"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Dark"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Bottom center"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"light"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Light"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("展示多行文本或者是设置文本内容的格式")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    多行信息
    第二行信息
    \n Top center\n    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{attrs:{slot:"content"},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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"content"')]),s._v(">")]),s._v("多行信息"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("br")]),s._v("/>")]),s._v("第二行信息"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Top center"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[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:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"disabled"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"点击关闭 tooltip 功能"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"light"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("点击{{disabled ? '开启' : '关闭'}} tooltip 功能"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"tooltip-wen-zi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-wen-zi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip 文字提示")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 主题")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("Tooltip 组件提供了两个不同的主题："),t("code",{pre:!0},[this._v("dark")]),this._v("和"),t("code",{pre:!0},[this._v("light")]),this._v("。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"geng-duo-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#geng-duo-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" 更多 Content")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"gao-ji-kuo-zhan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gao-ji-kuo-zhan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 高级扩展")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("transition")]),s._v(" 属性可以定制显隐的动画效果，默认为"),a("code",{pre:!0},[s._v("fade-in-linear")]),s._v("。\n如果需要关闭 "),a("code",{pre:!0},[s._v("tooltip")]),s._v(" 功能，"),a("code",{pre:!0},[s._v("disabled")]),s._v(" 属性可以满足这个需求，它接受一个"),a("code",{pre:!0},[s._v("Boolean")]),s._v("，设置为"),a("code",{pre:!0},[s._v("true")]),s._v("即可。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("事实上，这是基于 "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[this._v("Vue-popper")]),this._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",{pre:!0},[s._v("router-link")]),s._v(" 组件，请使用 "),a("code",{pre:!0},[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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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",{pre:!0},[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")])]),a("tr",[a("td",[s._v("hide-after")]),a("td",[s._v("Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])}],!1,null,null,null);l.options.__file="tooltip.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={data:function(){return{value1:"",value2:new Date(2016,9,10,18,40),value3:new Date(2016,9,10,18,40),value4:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value5:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],startTime:"",endTime:""}}},r=(a(447),a(0)),l=Object(r.a)(e,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:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value1: ''\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择时间"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可以选择任意时间")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value2: new Date(2016, 9, 10, 18, 40),\n value3: new Date(2016, 9, 10, 18, 40)\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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"}}),a("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})]],2),a("p",[s._v("使用 el-time-picker 标签，通过"),a("code",[s._v("selectableRange")]),s._v("限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开"),a("code",[s._v("arrow-control")]),s._v("属性则通过界面上的箭头进行选择。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"任意时间点"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("arrow-control")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"任意时间点"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v("),\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("若先选择开始时间，则结束时间内备选项的状态会随之改变")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"起始时间"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"startTime"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"结束时间"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"endTime"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{pre:!0,attrs:{class:"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",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("startTime")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("endTime")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可选择任意的时间范围")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-time-picker",{attrs:{"is-range":"","range-separator":"至","start-placeholder":"开始时间","end-placeholder":"结束时间",placeholder:"选择时间范围"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}}),a("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"至","start-placeholder":"开始时间","end-placeholder":"结束时间",placeholder:"选择时间范围"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})]],2),a("p",[s._v("添加"),a("code",[s._v("is-range")]),s._v("属性即可选择时间范围，同样支持"),a("code",[s._v("arrow-control")]),s._v("属性。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("is-range")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"至"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"开始时间"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"结束时间"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择时间范围"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("is-range")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("arrow-control")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"至"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"开始时间"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"结束时间"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择时间范围"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v("), "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v("), "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")]\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[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),s._m(13),s._m(14)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"timepicker-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" TimePicker 时间选择器")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"gu-ding-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定时间点")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ren-yi-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 任意时间点")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"gu-ding-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定时间范围")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ren-yi-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 任意时间范围")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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 / v-model")]),a("td",[s._v("绑定值")]),a("td",[s._v("date(TimePicker) / string(TimeSelect)")]),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("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("medium / 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("start-placeholder")]),a("td",[s._v("范围选择时开始日期的占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-placeholder")]),a("td",[s._v("范围选择时开始日期的占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-range")]),a("td",[s._v("是否为时间范围选择，仅对"),a("code",{pre:!0},[s._v("")]),s._v("有效")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("arrow-control")]),a("td",[s._v("是否使用箭头进行时间选择，仅对"),a("code",{pre:!0},[s._v("")]),s._v("有效")]),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("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("{}")])]),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("value-format")]),a("td",[s._v("可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象")]),a("td",[s._v("string")]),a("td",[s._v("见"),a("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[s._v("日期格式")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("可选，选择器打开时默认显示的时间")]),a("td",[s._v("Date(TimePicker) / string(TimeSelect)")]),a("td",[s._v("可被"),a("code",{pre:!0},[s._v("new Date()")]),s._v("解析(TimePicker) / 可选值(TimeSelect)")]),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("—")])]),a("tr",[a("td",[s._v("prefix-icon")]),a("td",[s._v("自定义头部图标的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-time")])]),a("tr",[a("td",[s._v("clear-icon")]),a("td",[s._v("自定义清空图标的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-circle-close")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"time-select-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Select Options")])},function(){var s=this,t=s.$createElement,a=s._self._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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"time-picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._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",{pre:!0},[s._v("'18:30:00 - 20:30:00'")]),s._v("或者传入数组"),a("code",{pre:!0},[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",{pre:!0},[s._v("HH")]),s._v("，分："),a("code",{pre:!0},[s._v("mm")]),s._v("，秒："),a("code",{pre:!0},[s._v("ss")]),s._v("，AM/PM "),a("code",{pre:!0},[s._v("A")])]),a("td",[s._v("'HH:mm:ss'")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._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("blur")]),a("td",[s._v("当 input 失去焦点时触发")]),a("td",[s._v("组件实例")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("当 input 获得焦点时触发")]),a("td",[s._v("组件实例")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("-")])])])])}],!1,null,null,null);l.options.__file="time-picker.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={data:function(){return{tags:[{name:"标签一",type:""},{name:"标签二",type:"success"},{name:"标签三",type:"info"},{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=""}}},r=(a(446),a(0)),l=Object(r.a)(e,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:'标签一\n标签二\n标签三\n标签四\n标签五\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tag",[s._v("标签一")]),a("el-tag",{attrs:{type:"success"}},[s._v("标签二")]),a("el-tag",{attrs:{type:"info"}},[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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("标签一"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("标签二"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("标签三"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("标签四"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(">")]),s._v("标签五"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n {{tag.name}}\n\n\n\n',script:"\n export default {\n data() {\n return {\n tags: [\n { name: '标签一', type: '' },\n { name: '标签二', type: 'success' },\n { name: '标签三', type: 'info' },\n { name: '标签四', type: 'warning' },\n { name: '标签五', type: 'danger' }\n ]\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},s._l(s.tags,function(t){return a("el-tag",{key:t.name,attrs:{closable:"",type:t.type}},[s._v("\n "+s._s(t.name)+"\n")])}),1),a("p",[s._v("设置"),a("code",[s._v("closable")]),s._v("属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置"),a("code",[s._v("disable-transitions")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，true 为关闭。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tag in tags"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tag.name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tag.type"')]),s._v(">")]),s._v("\n {{tag.name}}\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tags")]),s._v(": [\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'标签一'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'标签二'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'标签三'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'标签四'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'标签五'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'danger'")]),s._v(" }\n ]\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n {{tag}}\n\n\n\n+ New Tag\n\n\n\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:"\n .el-tag + .el-tag {\n margin-left: 10px;\n }\n .button-new-tag {\n margin-left: 10px;\n height: 32px;\n line-height: 30px;\n padding-top: 0;\n padding-bottom: 0;\n }\n .input-new-tag {\n width: 90px;\n margin-left: 10px;\n vertical-align: bottom;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s._l(s.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!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:"small"},on:{blur:s.handleInputConfirm},nativeOn:{keyup:function(t){return"button"in t||!s._k(t.keyCode,"enter",13,t.key,"Enter")?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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tag"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tag in dynamicTags"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":disable-transitions")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClose(tag)"')]),s._v(">")]),s._v("\n {{tag}}\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input-new-tag"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"inputVisible"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"inputValue"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"saveTagInput"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@keyup.enter.native")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleInputConfirm"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@blur")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleInputConfirm"')]),s._v("\n>")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-else")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"button-new-tag"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"showInput"')]),s._v(">")]),s._v("+ New Tag"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-tag")]),s._v(" + "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-tag")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".button-new-tag")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("32px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("30px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding-top")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding-bottom")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".input-new-tag")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("90px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("vertical-align")]),s._v(": bottom;\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dynamicTags")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'标签一'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'标签二'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'标签三'")]),s._v("],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inputVisible")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inputValue")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClose(tag) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.splice("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n },\n\n showInput() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputVisible = "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$nextTick("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" inputValue = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputValue;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (inputValue) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputVisible = "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputValue = "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'默认标签\n中等标签\n小型标签\n超小标签\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tag",{attrs:{closable:""}},[s._v("默认标签")]),a("el-tag",{attrs:{size:"medium",closable:""}},[s._v("中等标签")]),a("el-tag",{attrs:{size:"small",closable:""}},[s._v("小型标签")]),a("el-tag",{attrs:{size:"mini",closable:""}},[s._v("超小标签")])],1),a("p",[s._v("额外的尺寸："),a("code",[s._v("medium")]),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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v(">")]),s._v("默认标签"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v(">")]),s._v("中等标签"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v(">")]),s._v("小型标签"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v(">")]),s._v("超小标签"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"tag-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag 标签")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ke-yi-chu-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-yi-chu-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可移除标签")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dong-tai-bian-ji-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-bian-ji-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态编辑标签")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("动态编辑标签可以通过点击标签关闭按钮后触发的 "),t("code",{pre:!0},[this._v("close")]),this._v(" 事件来实现")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("success/info/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("disable-transitions")]),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("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("尺寸")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._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("click")]),a("td",[s._v("点击 Tag 时触发的事件")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭 Tag 时触发的事件")]),a("td",[s._v("—")])])])])}],!1,null,null,null);l.options.__file="tag.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={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,tabPosition:"top"}},methods:{handleClick:function(s,t){console.log(s,t)},handleTabsEdit:function(s,t){if("add"===t){var a=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:a,content:"New Tab content"}),this.editableTabsValue=a}if("remove"===t){var e=this.editableTabs,r=this.editableTabsValue;r===s&&e.forEach(function(t,a){if(t.name===s){var l=e[a+1]||e[a-1];l&&(r=l.name)}}),this.editableTabsValue=r,this.editableTabs=e.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(e,r){if(e.name===s){var l=t[r+1]||t[r-1];l&&(a=l.name)}}),this.editableTabsValue2=a,this.editableTabs2=t.filter(function(t){return t.name!==s})}}},r=a(0),l=Object(r.a)(e,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:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"activeName"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@tab-click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"用户管理"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"first"')]),s._v(">")]),s._v("用户管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"配置管理"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"second"')]),s._v(">")]),s._v("配置管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"角色管理"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"third"')]),s._v(">")]),s._v("角色管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"定时任务补偿"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fourth"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("activeName")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'second'")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick(tab, event) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(tab, event);\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("选项卡样式的标签页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"activeName2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@tab-click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"用户管理"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"first"')]),s._v(">")]),s._v("用户管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"配置管理"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"second"')]),s._v(">")]),s._v("配置管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"角色管理"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"third"')]),s._v(">")]),s._v("角色管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"定时任务补偿"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fourth"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("activeName2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'first'")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick(tab, event) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(tab, event);\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("卡片化的标签页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n 用户管理\n 配置管理\n 角色管理\n 定时任务补偿\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"用户管理"')]),s._v(">")]),s._v("用户管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"配置管理"')]),s._v(">")]),s._v("配置管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"角色管理"')]),s._v(">")]),s._v("角色管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"定时任务补偿"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n tabPosition: 'top'\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:s.tabPosition,callback:function(t){s.tabPosition=t},expression:"tabPosition"}},[a("el-radio-button",{attrs:{label:"top"}},[s._v("top")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("right")]),a("el-radio-button",{attrs:{label:"bottom"}},[s._v("bottom")]),a("el-radio-button",{attrs:{label:"left"}},[s._v("left")])],1),a("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":s.tabPosition}},[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)]],2),a("p",[s._v("标签一共有四个方向的设置 "),a("code",[s._v('tabPosition="left|right|top|bottom"')])]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tabPosition"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 30px;"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("top"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("right"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("bottom"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("left"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":tab-position")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tabPosition"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"height: 200px;"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"用户管理"')]),s._v(">")]),s._v("用户管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"配置管理"')]),s._v(">")]),s._v("配置管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"角色管理"')]),s._v(">")]),s._v("角色管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"定时任务补偿"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tabPosition")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'top'")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n 我的行程\n 我的行程\n \n 消息中心\n 角色管理\n 定时任务补偿\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{attrs:{slot:"label"},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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"label"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v(" 我的行程"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n 我的行程\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"消息中心"')]),s._v(">")]),s._v("消息中心"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"角色管理"')]),s._v(">")]),s._v("角色管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"定时任务补偿"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("增减标签页按钮只能在选项卡样式的标签页下使用")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n {{item.content}}\n \n\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",attrs:{slot:"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,e){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n "+s._s(t.content)+"\n ")])}),1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"editableTabsValue"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("editable")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@edit")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleTabsEdit"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"(item, index) in editableTabs"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.title"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n >")]),s._v("\n {{item.content}}\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("editableTabsValue")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("editableTabs")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tabIndex")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v("\n }\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleTabsEdit(targetName, action) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'add'")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" newTabName = ++"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".tabIndex + "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs.push({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New Tab'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": newTabName,\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New Tab content'")]),s._v("\n });\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue = newTabName;\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'remove'")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" tabs = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" activeName = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("] || tabs[index - "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("];\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue = activeName;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs = tabs.filter("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n }\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n add tab\n \n
    \n\n \n {{item.content}}\n \n\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",attrs:{slot:"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,e){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n "+s._s(t.content)+"\n ")])}),1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"addTab(editableTabsValue2)"')]),s._v("\n >")]),s._v("\n add tab\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"editableTabsValue2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@tab-remove")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"removeTab"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"(item, index) in editableTabs2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.title"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n >")]),s._v("\n {{item.content}}\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("editableTabsValue2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("editableTabs2")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tabIndex")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v("\n }\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n addTab(targetName) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" newTabName = ++"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".tabIndex + "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2.push({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New Tab'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": newTabName,\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'New Tab content'")]),s._v("\n });\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n },\n removeTab(targetName) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" tabs = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" activeName = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("] || tabs[index - "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("];\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"tabs-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs 标签页")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"xuan-xiang-qia-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-qia-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选项卡样式")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"qia-pian-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 卡片化")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 位置")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("可以通过 "),t("code",{pre:!0},[this._v("tab-position")]),this._v(" 设置标签的位置")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义标签页")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("可以通过具名 "),t("code",{pre:!0},[this._v("slot")]),this._v(" 来实现自定义标签页的内容")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dong-tai-zeng-jian-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态增减标签页")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义增加标签页触发器")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"tabs-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("value / v-model")]),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("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("tab-position")]),a("td",[s._v("选项卡所在位置")]),a("td",[s._v("string")]),a("td",[s._v("top/right/bottom/left")]),a("td",[s._v("top")])]),a("tr",[a("td",[s._v("stretch")]),a("td",[s._v("标签的宽度是否自撑开")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("before-leave")]),a("td",[s._v("切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。")]),a("td",[s._v("Function(activeName, oldActiveName)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"tabs-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[this._v("¶")]),this._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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"tab-pane-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tab-pane Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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")])]),a("tr",[a("td",[s._v("lazy")]),a("td",[s._v("标签是否延迟渲染")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],!1,null,null,null);l.options.__file="tabs.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={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}],tableData7:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}],currentRow:null,multipleSelection:[],search:""}},methods:{getSummaries:function(s){var t=s.columns,a=s.data,e=[];return t.forEach(function(s,t){if(0!==t){var r=a.map(function(t){return Number(t[s.property])});r.every(function(s){return isNaN(s)})?e[t]="N/A":(e[t]=r.reduce(function(s,t){var a=Number(t);return isNaN(a)?s:s+t},0),e[t]+=" 元")}else e[t]="总价"}),e},resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},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(s){console.log(s)},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},filterHandler:function(s,t,a){return t[a.property]===s},tableRowClassName:function(s){s.row;var t=s.rowIndex;return 1===t?"warning-row":3===t?"success-row":""},deleteRow:function(s,t){t.splice(s,1)},arraySpanMethod:function(s){s.row,s.column;var t=s.rowIndex,a=s.columnIndex;if(t%2==0){if(0===a)return[1,2];if(1===a)return[0,0]}},objectSpanMethod:function(s){s.row,s.column;var t=s.rowIndex;if(0===s.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}},indexMethod:function(s){return 2*s}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}},r=(a(445),a(0)),l=Object(r.a)(e,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:' \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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n }]\n }\n }\n }\n ")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("使用带斑马纹的表格，可以更容易区分出不同行的数据。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("stripe")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n methods: {\n tableRowClassName({row, rowIndex}) {\n if (rowIndex === 1) {\n return 'warning-row';\n } else if (rowIndex === 3) {\n return 'success-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 .warning-row {\n background: oldlace;\n }\n\n .el-table .success-row {\n background: #f0f9eb;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":row-class-name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableRowClassName"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-table")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".warning-row")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": oldlace;\n }\n\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-table")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".success-row")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#f0f9eb")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n tableRowClassName({row, rowIndex}) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'warning-row'")]),s._v(";\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success-row'")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n }\n },\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData2")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("纵向内容过多时，可选择固定表头。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("横向内容过多时，可选择固定列。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n handleClick(row) {\n console.log(row);\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",attrs:{slot:"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([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:function(a){s.handleClick(t.row)}}},[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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"province"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"省份"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"市区"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"邮编"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"操作"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClick(scope.row)"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("查看"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("编辑"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick(row) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(row);\n }\n },\n\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("横纵内容过多时，可选择固定列和表头。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"province"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"省份"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"市区"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"邮编"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("当数据量动态变化时，可以为 Table 设置一个最大高度。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,"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([{key:"default",fn: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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData4"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("max-height")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"province"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"省份"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"市区"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"邮编"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"操作"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click.native.prevent")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"deleteRow(scope.$index, tableData4)"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n 移除\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n deleteRow(index, rows) {\n rows.splice(index, "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n }\n },\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData4")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"配送信息"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"province"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"省份"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"市区"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"邮编"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("选择单行数据时使用色块表示。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"singleTable"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("highlight-current-row")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"setCurrent(tableData[1])"')]),s._v(">")]),s._v("选中第二行"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"setCurrent()"')]),s._v(">")]),s._v("取消选择"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("currentRow")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n },\n\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n setCurrent(row) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.singleTable.setCurrentRow(row);\n },\n handleCurrentChange(val) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".currentRow = val;\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("选择多行数据时使用 Checkbox。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData3,"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([{key:"default",fn: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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"multipleTable"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tooltip-effect")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@selection-change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSelectionChange"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"selection"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"55"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("{{ scope.row.date }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-overflow-tooltip")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"toggleSelection([tableData3[1], tableData3[2]])"')]),s._v(">")]),s._v("切换第二、第三行的选中状态"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"toggleSelection()"')]),s._v(">")]),s._v("取消选择"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("multipleSelection")]),s._v(": []\n }\n },\n\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n toggleSelection(rows) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rows) {\n rows.forEach("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("row")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.multipleTable.toggleRowSelection(row);\n });\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.multipleTable.clearSelection();\n }\n },\n handleSelectionChange(val) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".multipleSelection = val;\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("对表格进行排序，可快速查找或对比数据。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,"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("sortable")]),s._v("属性即可实现以该列为基准的排序，接受一个"),a("code",[s._v("Boolean")]),s._v("，默认为"),a("code",[s._v("false")]),s._v("。可以通过 Table 的"),a("code",[s._v("default-sort")]),s._v("属性设置默认的排序列和排序顺序。可以使用"),a("code",[s._v("sort-method")]),s._v("或者"),a("code",[s._v("sort-by")]),s._v("使用自定义的排序规则。如果需要后端排序，需将"),a("code",[s._v("sortable")]),s._v("设置为"),a("code",[s._v("custom")]),s._v("，同时在 Table 上监听"),a("code",[s._v("sort-change")]),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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-sort")]),s._v(" = "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{prop: 'date', order: 'descending'}\"")]),s._v("\n >")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":formatter")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formatter"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n }]\n }\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n formatter(row, column) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.address;\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("对表格进行筛选，可快速查找到自己想看的数据。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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 resetDateFilter() {\n this.$refs.filterTable.clearFilter('date');\n },\n clearFilter() {\n this.$refs.filterTable.clearFilter();\n },\n formatter(row, column) {\n return row.address;\n },\n filterTag(value, row) {\n return row.tag === value;\n },\n filterHandler(value, row, column) {\n const property = column['property'];\n return row[property] === value;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{on:{click:s.resetDateFilter}},[s._v("清除日期过滤器")]),a("el-button",{on:{click:s.clearFilter}},[s._v("清除所有过滤器")]),a("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":s.filterHandler}}),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,"filter-placement":"bottom-end"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-tag",{attrs:{type:"家"===t.row.tag?"primary":"success","disable-transitions":""}},[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("code",[s._v("column")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"resetDateFilter"')]),s._v(">")]),s._v("清除日期过滤器"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"clearFilter"')]),s._v(">")]),s._v("清除所有过滤器"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"filterTable"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("column-key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":filters")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":filter-method")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"filterHandler"')]),s._v("\n >")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":formatter")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formatter"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tag"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"标签"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":filters")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":filter-method")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"filterTag"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filter-placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"scope.row.tag === '家' ? 'primary' : 'success'\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disable-transitions")]),s._v(">")]),s._v("{{scope.row.tag}}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'家'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'公司'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'家'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'公司'")]),s._v("\n }]\n }\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n resetDateFilter() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.filterTable.clearFilter("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date'")]),s._v(");\n },\n clearFilter() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.filterTable.clearFilter();\n },\n formatter(row, column) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.address;\n },\n filterTag(value, row) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.tag === value;\n },\n filterHandler(value, row, column) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" property = column["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'property'")]),s._v("];\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row[property] === value;\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(14),a("p",[s._v("自定义列的显示内容，可组合其他组件使用。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{label:"日期",width:"180"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("i",{staticClass:"el-icon-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([{key:"default",fn: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",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[s._v(s._s(t.row.name))])],1)])]}}])}),a("el-table-column",{attrs:{label:"操作"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(a){s.handleEdit(t.$index,t.row)}}},[s._v("编辑")]),a("el-button",{attrs:{size:"mini",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("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-time"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-left: 10px"')]),s._v(">")]),s._v("{{ scope.row.date }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("姓名: {{ scope.row.name }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("住址: {{ scope.row.address }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name-wrapper"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("{{ scope.row.name }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"操作"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("编辑"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("删除"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n }]\n }\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleEdit(index, row) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(index, row);\n },\n handleDelete(index, row) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(index, row);\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(15),a("p",[s._v("当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData5}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:s._u([{key:"default",fn: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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData5"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"expand"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-position")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inline")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-table-expand"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"商品名称"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{{ props.row.name }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"所属店铺"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{{ props.row.shop }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"商品 ID"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{{ props.row.id }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"店铺 ID"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{{ props.row.shopId }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"商品分类"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{{ props.row.category }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"店铺地址"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{{ props.row.address }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"商品描述"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{{ props.row.desc }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"商品 ID"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"商品名称"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"描述"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"desc"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".demo-table-expand")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".demo-table-expand")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("label")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("90px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".demo-table-expand")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-form-item")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("50%")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData5")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987122'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("category")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区真北路'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shop")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎夫妻店'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shopId")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'10333'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987123'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("category")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区真北路'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shop")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎夫妻店'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shopId")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'10333'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987125'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("category")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区真北路'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shop")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎夫妻店'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shopId")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'10333'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987126'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("category")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区真北路'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shop")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎夫妻店'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shopId")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'10333'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(16),a("p",[s._v("表头支持自定义。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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 search: ''\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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData7.filter(function(t){return!s.search||t.name.toLowerCase().includes(s.search.toLowerCase())})}},[a("el-table-column",{attrs:{label:"Date",prop:"date"}}),a("el-table-column",{attrs:{label:"Name",prop:"name"}}),a("el-table-column",{attrs:{align:"right"},scopedSlots:s._u([{key:"header",fn:function(t){return[a("el-input",{attrs:{size:"mini",placeholder:"输入关键字搜索"},model:{value:s.search,callback:function(t){s.search=t},expression:"search"}})]}},{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(a){s.handleEdit(t.$index,t.row)}}},[s._v("Edit")]),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(a){s.handleDelete(t.$index,t.row)}}},[s._v("Delete")])]}}])})],1)]],2),a("p",[s._v("通过设置 "),a("a",{attrs:{href:"https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD"}},[s._v("Scoped slot")]),s._v(" 来自定义表头。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData7.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"header"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"search"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"输入关键字搜索"')]),s._v("/>")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("Edit"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("Delete"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("search")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleEdit(index, row) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(index, row);\n },\n handleDelete(index, row) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(index, row);\n }\n },\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(17),a("p",[s._v("若表格展示的是各类数字，可以在表尾显示各列的合计。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-summary")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"数值 1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"数值 2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"数值 3"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":summary-method")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"getSummaries"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-summary")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"数值 1（元）"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"数值 2（元）"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"数值 3（元）"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData6")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987122'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'234'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'3.2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987123'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'165'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'4.43'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987124'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'324'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1.9'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987125'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'621'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2.2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("17")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987126'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'539'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'4.1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("15")]),s._v("\n }]\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n getSummaries(param) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" { columns, data } = param;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" sums = [];\n columns.forEach("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("column, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (index === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n sums[index] = "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'总价'")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" values = data.map("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v("(item[column.property]));\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!values.every("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("value")]),s._v(" =>")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("isNaN")]),s._v("(value))) {\n sums[index] = values.reduce("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("prev, curr")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" value = "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v("(curr);\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("isNaN")]),s._v("(value)) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" prev + curr;\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" prev;\n }\n }, "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n sums[index] += "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("' 元'")]),s._v(";\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n sums[index] = "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'N/A'")]),s._v(";\n }\n });\n\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" sums;\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(18),a("p",[s._v("多行或多列共用一个数据时，可以合并行或列。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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 arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n if (rowIndex % 2 === 0) {\n if (columnIndex === 0) {\n return [1, 2];\n } else if (columnIndex === 1) {\n return [0, 0];\n }\n }\n },\n\n objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n if (columnIndex === 0) {\n if (rowIndex % 2 === 0) {\n return {\n rowspan: 2,\n colspan: 1\n };\n } else {\n return {\n rowspan: 0,\n colspan: 0\n };\n }\n }\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,"span-method":s.arraySpanMethod,border:""}},[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,"span-method":s.objectSpanMethod,border:""}},[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)],1)]],2),a("p",[s._v("通过给"),a("code",[s._v("table")]),s._v("传入"),a("code",[s._v("span-method")]),s._v("方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行"),a("code",[s._v("row")]),s._v("、当前列"),a("code",[s._v("column")]),s._v("、当前行号"),a("code",[s._v("rowIndex")]),s._v("、当前列号"),a("code",[s._v("columnIndex")]),s._v("四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表"),a("code",[s._v("rowspan")]),s._v("，第二个元素代表"),a("code",[s._v("colspan")]),s._v("。 也可以返回一个键名为"),a("code",[s._v("rowspan")]),s._v("和"),a("code",[s._v("colspan")]),s._v("的对象。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span-method")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"arraySpanMethod"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"数值 1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"数值 2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"数值 3"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span-method")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"objectSpanMethod"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"数值 1（元）"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"数值 2（元）"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"数值 3（元）"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData6")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987122'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'234'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'3.2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987123'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'165'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'4.43'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987124'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'324'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1.9'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("9")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987125'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'621'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2.2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("17")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'12987126'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'539'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'4.1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("15")]),s._v("\n }]\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex % "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(" === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (columnIndex === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v("];\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (columnIndex === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("];\n }\n }\n },\n\n objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (columnIndex === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rowIndex % "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(" === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("rowspan")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("colspan")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("rowspan")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("colspan")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n };\n }\n }\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(19),s._m(20),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333,\n tag: '家'\n }, {\n date: '2016-05-02',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333,\n tag: '公司'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333,\n tag: '家'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333,\n tag: '公司'\n }],\n }\n },\n methods: {\n indexMethod(index) {\n return index * 2;\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{type:"index",index:s.indexMethod}}),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("type=index")]),s._v(" 的列传入 "),a("code",[s._v("index")]),s._v(" 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 "),a("code",[s._v("0")]),s._v(" 开始）作为参数，返回值将作为索引展示。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"indexMethod"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'家'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'公司'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'家'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("province")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'普陀区'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200333")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'公司'")]),s._v("\n }],\n }\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n indexMethod(index) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" index * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(";\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26),s._m(27),s._m(28),s._m(29),s._m(30),s._m(31),s._m(32)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"table-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table 表格")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础表格")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-ban-ma-wen-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ban-ma-wen-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带斑马纹表格")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-bian-kuang-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-bian-kuang-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带边框表格")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-zhuang-tai-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-zhuang-tai-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带状态表格")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"gu-ding-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定表头")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"gu-ding-lie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定列")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"gu-ding-lie-he-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie-he-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定列和表头")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"liu-ti-gao-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#liu-ti-gao-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 流体高度")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"duo-ji-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-ji-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多级表头")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单选")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多选")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"pai-xu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pai-xu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 排序")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shai-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shai-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 筛选")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi-lie-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-lie-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义列模板")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zhan-kai-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-kai-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 展开行")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义表头")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"biao-wei-he-ji-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-wei-he-ji-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表尾合计行")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"he-bing-xing-huo-lie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#he-bing-xing-huo-lie","aria-hidden":"true"}},[this._v("¶")]),this._v(" 合并行或列")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi-suo-yin"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-suo-yin","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义索引")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("自定义 "),t("code",{pre:!0},[this._v("type=index")]),this._v(" 列的行号。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"table-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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 的 style.height 的值，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("size")]),a("td",[s._v("Table 的尺寸")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),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, rowIndex})/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, rowIndex})/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("cell-class-name")]),a("td",[s._v("单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。")]),a("td",[s._v("Function({row, column, rowIndex, columnIndex})/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("cell-style")]),a("td",[s._v("单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。")]),a("td",[s._v("Function({row, column, rowIndex, columnIndex})/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("header-row-class-name")]),a("td",[s._v("表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。")]),a("td",[s._v("Function({row, rowIndex})/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("header-row-style")]),a("td",[s._v("表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。")]),a("td",[s._v("Function({row, rowIndex})/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("header-cell-class-name")]),a("td",[s._v("表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。")]),a("td",[s._v("Function({row, column, rowIndex, columnIndex})/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("header-cell-style")]),a("td",[s._v("表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。")]),a("td",[s._v("Function({row, column, rowIndex, columnIndex})/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 功能的情况下，该属性是必填的。类型为 String 时，支持多层访问："),a("code",{pre:!0},[s._v("user.info.id")]),s._v("，但不支持 "),a("code",{pre:!0},[s._v("user.info[0].id")]),s._v("，此种情况请使用 "),a("code",{pre:!0},[s._v("Function")]),s._v("。")]),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",{pre:!0},[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",{pre:!0},[s._v("prop")]),s._v("属性指定默认的排序的列，"),a("code",{pre:!0},[s._v("order")]),s._v("指定默认排序的顺序")]),a("td",[s._v("Object")]),a("td",[a("code",{pre:!0},[s._v("order")]),s._v(": ascending, descending")]),a("td",[s._v("如果只指定了"),a("code",{pre:!0},[s._v("prop")]),s._v(", 没有指定"),a("code",{pre:!0},[s._v("order")]),s._v(", 则默认顺序是ascending")])]),a("tr",[a("td",[s._v("tooltip-effect")]),a("td",[s._v("tooltip "),a("code",{pre:!0},[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("—")])]),a("tr",[a("td",[s._v("span-method")]),a("td",[s._v("合并行或列的计算方法")]),a("td",[s._v("Function({ row, column, rowIndex, columnIndex })")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("select-on-indeterminate")]),a("td",[s._v("在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"table-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[this._v("¶")]),this._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("header-contextmenu")]),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-change")]),a("td",[s._v("当用户对某一行展开或者关闭的时候会触发该事件")]),a("td",[s._v("row, expandedRows")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"table-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[this._v("¶")]),this._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("用于多选表格，清空用户的选择")]),a("td",[s._v("—")])]),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("toggleAllSelection")]),a("td",[s._v("用于多选表格，切换所有行的选中状态")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("toggleRowExpansion")]),a("td",[s._v("用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）")]),a("td",[s._v("row, expanded")])]),a("tr",[a("td",[s._v("setCurrentRow")]),a("td",[s._v("用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。")]),a("td",[s._v("row")])]),a("tr",[a("td",[s._v("clearSort")]),a("td",[s._v("用于清空排序条件，数据会恢复成未排序的状态")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearFilter")]),a("td",[s._v("不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件")]),a("td",[s._v("columnKey")])]),a("tr",[a("td",[s._v("doLayout")]),a("td",[s._v("对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sort")]),a("td",[s._v("手动对 Table 进行排序。参数"),a("code",{pre:!0},[s._v("prop")]),s._v("属性指定排序列，"),a("code",{pre:!0},[s._v("order")]),s._v("指定排序顺序。")]),a("td",[s._v("prop: string, order: string")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"table-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Slot")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("append")]),t("td",[this._v("插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"table-column-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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",{pre:!0},[s._v("selection")]),s._v(" 则显示多选框；如果设置了 "),a("code",{pre:!0},[s._v("index")]),s._v(" 则显示该行的索引（从 1 开始计算）；如果设置了 "),a("code",{pre:!0},[s._v("expand")]),s._v(" 则显示为一个可展开的按钮")]),a("td",[s._v("string")]),a("td",[s._v("selection/index/expand")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("index")]),a("td",[s._v("如果设置了 "),a("code",{pre:!0},[s._v("type=index")]),s._v("，可以通过传递 "),a("code",{pre:!0},[s._v("index")]),s._v(" 属性来自定义索引")]),a("td",[s._v("number, Function(index)")]),a("td",[s._v("-")]),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 的时候有效，需返回一个数字，和 Array.sort 表现一致")]),a("td",[s._v("Function(a, b)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sort-by")]),a("td",[s._v("指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推")]),a("td",[s._v("String/Array/Function(row, index)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sort-orders")]),a("td",[s._v("数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序")]),a("td",[s._v("array")]),a("td",[s._v("数组中的元素需为以下三者之一："),a("code",{pre:!0},[s._v("ascending")]),s._v(" 表示升序，"),a("code",{pre:!0},[s._v("descending")]),s._v(" 表示降序，"),a("code",{pre:!0},[s._v("null")]),s._v(" 表示还原为原始顺序")]),a("td",[s._v("['ascending', 'descending', null]")])]),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, cellValue, index)")]),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 则会在数据更新之后保留之前选中的数据（需指定 "),a("code",{pre:!0},[s._v("row-key")]),s._v("）")]),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-placement")]),a("td",[s._v("过滤弹出框的定位")]),a("td",[s._v("String")]),a("td",[s._v("与 Tooltip 的 "),a("code",{pre:!0},[s._v("placement")]),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, column)")]),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(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"table-column-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Scoped Slot")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("自定义列的内容，参数为 { row, column, $index }")])]),t("tr",[t("td",[this._v("header")]),t("td",[this._v("自定义表头的内容. 参数为 { column, $index }")])])])])}],!1,null,null,null);l.options.__file="table.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={data:function(){return{value1:!0,value2:!0,value3:!0,value4:!0,value5:"100",value6:!0,value7:!1}}},r=(a(444),a(0)),l=Object(r.a)(e,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:'\n\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",attrs:{slot:"source"},slot:"source"},[a("el-switch",{attrs:{"active-color":"#13ce66","inactive-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("active-color")]),s._v("属性与"),a("code",[s._v("inactive-color")]),s._v("属性来设置开关的背景色。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inactive-color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value3: true,\n value4: true\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-switch",{attrs:{"active-text":"按月付费","inactive-text":"按年付费"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}}),a("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"按月付费","inactive-text":"按年付费"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("使用"),a("code",[s._v("active-text")]),s._v("属性与"),a("code",[s._v("inactive-text")]),s._v("属性来设置开关的文字描述。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-text")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"按月付费"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inactive-text")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"按年付费"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"display: block"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inactive-color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-text")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"按月付费"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inactive-text")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"按年付费"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n\n\n\n',script:"\n export default {\n data() {\n return {\n value5: '100'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tooltip",{attrs:{content:"Switch value: "+s.value5,placement:"top"}},[a("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)],1),a("p",[s._v("设置"),a("code",[s._v("active-value")]),s._v("和"),a("code",[s._v("inactive-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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"'Switch value: ' + value5\"")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inactive-color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inactive-value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'100'")]),s._v("\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value6: true,\n value7: false\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-switch",{attrs:{disabled:""},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}}),a("el-switch",{attrs:{disabled:""},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"switch-kai-guan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch-kai-guan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch 开关")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"wen-zi-miao-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-miao-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字描述")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"kuo-zhan-de-value-lei-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#kuo-zhan-de-value-lei-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 扩展的 value 类型")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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 / v-model")]),a("td",[s._v("绑定值")]),a("td",[s._v("boolean / 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")])]),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("40")])]),a("tr",[a("td",[s._v("active-icon-class")]),a("td",[s._v("switch 打开时所显示图标的类名，设置此项会忽略 "),a("code",{pre:!0},[s._v("active-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inactive-icon-class")]),a("td",[s._v("switch 关闭时所显示图标的类名，设置此项会忽略 "),a("code",{pre:!0},[s._v("inactive-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("active-text")]),a("td",[s._v("switch 打开时的文字描述")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inactive-text")]),a("td",[s._v("switch 关闭时的文字描述")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("active-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("inactive-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("active-color")]),a("td",[s._v("switch 打开时的背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])]),a("tr",[a("td",[s._v("inactive-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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("switch 状态发生变化时的回调函数")]),t("td",[this._v("新状态的值")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 Switch 获取焦点")]),t("td",[this._v("-")])])])])}],!1,null,null,null);l.options.__file="switch.md";t.default=l.exports},,,,,function(s,t,a){"use strict";a.r(t);var e={data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}},r=a(0),l=Object(r.a)(e,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:'\n \n \n \n\n\n下一步\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",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"active"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 1"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 2"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 3"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 12px;"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"next"')]),s._v(">")]),s._v("下一步"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n };\n },\n\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n next() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".active++ > "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2")]),s._v(") "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".active = "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("每一步骤显示出该步骤的状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{space:200,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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":space")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"已完成"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"进行中"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 3"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("每个步骤有其对应的步骤状态描述。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"这段就没那么长了"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("标题和描述都将居中。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:2,"align-center":""}},[a("el-step",{attrs:{title:"步骤1",description:"这是一段很长很长很长的描述性文字"}}),a("el-step",{attrs:{title:"步骤2",description:"这是一段很长很长很长的描述性文字"}}),a("el-step",{attrs:{title:"步骤3",description:"这是一段很长很长很长的描述性文字"}}),a("el-step",{attrs:{title:"步骤4",description:"这是一段很长很长很长的描述性文字"}})],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("align-center")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("步骤条内可以启用各种自定义的图标。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:1}},[a("el-step",{attrs:{title:"步骤 1",icon:"el-icon-edit"}}),a("el-step",{attrs:{title:"步骤 2",icon:"el-icon-upload"}}),a("el-step",{attrs:{title:"步骤 3",icon:"el-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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-picture"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("竖直方向的步骤条。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n \n \n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticStyle:{height:"300px"}},[a("el-steps",{attrs:{direction:"vertical",active:1}},[a("el-step",{attrs:{title:"步骤 1"}}),a("el-step",{attrs:{title:"步骤 2"}}),a("el-step",{attrs:{title:"步骤 3",description:"这是一段很长很长很长的描述性文字"}})],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"height: 300px;"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("direction")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"vertical"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 1"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 2"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n \n \n \n\n\n\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:1,simple:""}},[a("el-step",{attrs:{title:"步骤 1",icon:"el-icon-edit"}}),a("el-step",{attrs:{title:"步骤 2",icon:"el-icon-upload"}}),a("el-step",{attrs:{title:"步骤 3",icon:"el-icon-picture"}})],1),a("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[a("el-step",{attrs:{title:"步骤 1"}}),a("el-step",{attrs:{title:"步骤 2"}}),a("el-step",{attrs:{title:"步骤 3"}})],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("simple")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-picture"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("simple")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 1"')]),s._v(" >")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 2"')]),s._v(" >")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"步骤 3"')]),s._v(" >")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"steps-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps 步骤条")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"han-zhuang-tai-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#han-zhuang-tai-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 含状态步骤条")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"you-miao-shu-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#you-miao-shu-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 有描述的步骤条")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ju-zhong-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中的步骤条")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-tu-biao-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-biao-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带图标的步骤条")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shu-shi-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-shi-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 竖式步骤条")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jian-ji-feng-ge-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-ji-feng-ge-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 简洁风格的步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("设置 "),a("code",{pre:!0},[s._v("simple")]),s._v(" 可应用简洁风格，该条件下 "),a("code",{pre:!0},[s._v("align-center")]),s._v(" / "),a("code",{pre:!0},[s._v("description")]),s._v(" / "),a("code",{pre:!0},[s._v("direction")]),s._v(" / "),a("code",{pre:!0},[s._v("space")]),s._v(" 都将失效。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"steps-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("simple")]),a("td",[s._v("是否应用简洁风格")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"step-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("传入 icon 的 class 全名来自定义 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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[this._v("¶")]),this._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("自定义描述性文字")])])])])}],!1,null,null,null);l.options.__file="steps.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={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}}},r=(a(443),a(0)),l=Object(r.a)(e,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:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("自定义初始值"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("隐藏 Tooltip"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":show-tooltip")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("格式化 Tooltip"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":format-tooltip")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formatTooltip"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("禁用"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("50")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("36")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("48")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("42")]),s._v("\n }\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n formatTooltip(val) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" val / "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100")]),s._v(";\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("选项可以是离散的")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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-stops")]),s._v("属性可以显示间断点")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("不显示间断点"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("显示间断点"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-stops")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("通过输入框设置精确数值")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value8: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value8"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-input")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value8")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("支持选择某一数值范围")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value9"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("range")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-stops")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value9")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("8")]),s._v("]\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value10: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value10"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("vertical")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value10")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"slider-hua-kuai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-hua-kuai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider 滑块")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"chi-san-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-san-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 离散值")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-you-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有输入框")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"fan-wei-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fan-wei-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 范围选择")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shu-xiang-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-xiang-mo-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 竖向模式")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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 / v-model")]),a("td",[s._v("绑定值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),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("input-size")]),a("td",[s._v("输入框的尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large / medium / small / mini")]),a("td",[s._v("small")])]),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("—")])]),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("debounce")]),a("td",[s._v("输入时的去抖延迟，毫秒，仅在"),a("code",{pre:!0},[s._v("show-input")]),s._v("等于true时有效")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("tooltip-class")]),a("td",[s._v("tooltip 的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）")]),t("td",[this._v("改变后的值")])])])])}],!1,null,null,null);l.options.__file="slider.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={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:[],value11:[],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=[]}}},r=(a(442),a(0)),l=Object(r.a)(e,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:'\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",attrs:{slot:"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}})}),1)]],2),a("p",[a("code",[s._v("v-model")]),s._v("的值为当前被选中的"),a("code",[s._v("el-option")]),s._v("的 value 属性值")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'黄金糕'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'双皮奶'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项3'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'蚵仔煎'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项4'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'龙须面'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项5'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'北京烤鸭'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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}})}),1)]],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.disabled"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options2")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'黄金糕'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'双皮奶'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项3'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'蚵仔煎'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项4'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'龙须面'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项5'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'北京烤鸭'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("选择器不可用状态")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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}})}),1)]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("设置"),a("code",[s._v("disabled")]),s._v("属性，则整个选择器不可用")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n \n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'黄金糕'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'双皮奶'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项3'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'蚵仔煎'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项4'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'龙须面'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项5'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'北京烤鸭'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("包含清空按钮，可将选择器清空为初始状态")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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}})}),1)]],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("clearable")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'黄金糕'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'双皮奶'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项3'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'蚵仔煎'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项4'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'龙须面'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项5'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'北京烤鸭'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("适用性较广的基础多选，用 Tag 展示已选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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 value11: []\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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}})}),1),a("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"请选择"},model:{value:s.value11,callback:function(t){s.value11=t},expression:"value11"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}),1)]],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("的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置"),a("code",[s._v("collapse-tags")]),s._v("属性将它们合并为一段文字。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value11"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("collapse-tags")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-left: 20px;"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'黄金糕'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'双皮奶'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项3'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'蚵仔煎'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项4'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'龙须面'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项5'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'北京烤鸭'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": [],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value11")]),s._v(": []\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("可以自定义备选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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))])])}),1)]],2),a("p",[s._v("将自定义的 HTML 模板插入"),a("code",[s._v("el-option")]),s._v("的 slot 中即可。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in cities"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"float: left"')]),s._v(">")]),s._v("{{ item.label }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"float: right; color: #8492a6; font-size: 13px"')]),s._v(">")]),s._v("{{ item.value }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'北京'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Nanjing'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'南京'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'成都'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'深圳'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'广州'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("备选项进行分组展示")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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}})}),1)}),1)]],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option-group")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"group in options3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"group.label"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"group.label"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in group.options"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options3")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'热门城市'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'北京'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'城市名'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'成都'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'深圳'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'广州'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dalian'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'大连'")]),s._v("\n }]\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("可以利用搜索功能快速查找选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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}})}),1)]],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value8"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'黄金糕'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项2'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'双皮奶'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项3'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'蚵仔煎'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项4'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'龙须面'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选项5'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'北京烤鸭'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value8")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("从服务器搜索数据，输入关键字进行查找")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",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}})}),1)]],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value9"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("remote")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("reserve-keyword")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入关键词"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":remote-method")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"remoteMethod"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":loading")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"loading"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options4"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options4")]),s._v(": [],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value9")]),s._v(": [],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("list")]),s._v(": [],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("loading")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("states")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Alabama"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Alaska"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Arizona"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Arkansas"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"California"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Colorado"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Connecticut"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Delaware"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Florida"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Georgia"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Hawaii"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Idaho"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Illinois"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Indiana"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Iowa"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Kansas"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Kentucky"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Louisiana"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Maine"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Maryland"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Massachusetts"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Michigan"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Minnesota"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Mississippi"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Missouri"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Montana"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nebraska"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Nevada"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"New Hampshire"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"New Jersey"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"New Mexico"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"North Carolina"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"North Dakota"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Ohio"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Oklahoma"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Oregon"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Pennsylvania"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Rhode Island"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"South Carolina"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"South Dakota"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Tennessee"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Texas"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Utah"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Vermont"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Virginia"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"West Virginia"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Wisconsin"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Wyoming"')]),s._v("]\n }\n },\n mounted() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".list = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".states.map("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": item, "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": item };\n });\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n remoteMethod(query) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (query !== "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loading = "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n setTimeout("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loading = "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options4 = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".list.filter("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n });\n }, "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200")]),s._v(");\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options4 = [];\n }\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("可以创建并选中选项中不存在的条目")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"","default-first-option":"",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}})}),1)]],2),a("p",[s._v("使用"),a("code",[s._v("allow-create")]),s._v("属性即可通过在输入框中输入文字来创建新的条目。注意此时"),a("code",[s._v("filterable")]),s._v("必须为真。本例还使用了"),a("code",[s._v("default-first-option")]),s._v("属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value10"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("allow-create")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-first-option")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择文章标签"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in options5"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options5")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'HTML'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'HTML'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CSS'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'CSS'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'JavaScript'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'JavaScript'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value10")]),s._v(": []\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[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),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"select-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select 选择器")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"you-jin-yong-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#you-jin-yong-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 有禁用选项")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ke-qing-kong-dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong-dan-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可清空单选")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-duo-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础多选")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义模板")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"fen-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分组")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 远程搜索")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"chuang-jian-tiao-mu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chuang-jian-tiao-mu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 创建条目")])},function(){var s=this.$createElement,t=this._self._c||s;return t("div",{staticClass:"tip"},[t("p",[this._v("如果 Select 的绑定值为对象类型，请务必指定 "),t("code",{pre:!0},[this._v("value-key")]),this._v(" 作为它的唯一性标识。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"select-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("value / v-model")]),a("td",[s._v("绑定值")]),a("td",[s._v("boolean / string / number")]),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("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("value-key")]),a("td",[s._v("作为 value 唯一标识的键名，绑定值为对象类型时必填")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("medium/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("collapse-tags")]),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("autocomplete")]),a("td",[s._v("select input 的 autocomplete 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("off")])]),a("tr",[a("td",[s._v("auto-complete")]),a("td",[s._v("下个主版本弃用")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("off")])]),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",{pre:!0},[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("—")])]),a("tr",[a("td",[s._v("reserve-keyword")]),a("td",[s._v("多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-first-option")]),a("td",[s._v("在输入框按下回车，选择第一个匹配项。需配合 "),a("code",{pre:!0},[s._v("filterable")]),s._v(" 或 "),a("code",{pre:!0},[s._v("remote")]),s._v(" 使用")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("popper-append-to-body")]),a("td",[s._v("是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("automatic-dropdown")]),a("td",[s._v("对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"select-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[this._v("¶")]),this._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值")])]),a("tr",[a("td",[s._v("clear")]),a("td",[s._v("可清空的单选模式下用户点击清空按钮时触发")]),a("td",[s._v("—")])]),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)")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"select-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Slots")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Option 组件列表")])]),t("tr",[t("td",[this._v("prefix")]),t("td",[this._v("Select 组件头部内容")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"option-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"option-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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",{pre:!0},[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(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._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("focus")]),a("td",[s._v("使 input 获取焦点")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("使 input 失去焦点，并隐藏下拉框")]),a("td",[s._v("-")])])])])}],!1,null,null,null);l.options.__file="select.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){document.querySelector(".source").style.padding="0"})}},r=(a(441),a(0)),l=Object(r.a)(e,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:'
    \n 默认不区分颜色\n \n
    \n
    \n 区分颜色\n \n \n
    \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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("默认不区分颜色"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("区分颜色"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":colors")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("用辅助文字直接地表达对应分数")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n value3: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-text")]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("当有多层评价时，可以用不同类型的 icon 区分评分层级")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value4: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":icon-classes")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("void-icon-class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"icon-rate-face-off"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":colors")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("只读的评分用来展示分数，允许出现半星")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",attrs:{slot:"source"},slot:"source"},[a("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-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-score")]),s._v("，则会在右侧显示目前的分值。可以提供 "),a("code",[s._v("score-template")]),s._v(" 作为显示模板，模板为一个包含了 "),a("code",[s._v("{value}")]),s._v(" 的字符串，"),a("code",[s._v("{value}")]),s._v(" 会被解析为分值。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-score")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#ff9900"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("score-template")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"{value}"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3.7")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"rate-ping-fen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate-ping-fen","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rate 评分")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"fu-zhu-wen-zi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-wen-zi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 辅助文字")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"qi-ta-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" 其它 icon")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zhi-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 只读")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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 / v-model")]),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("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("是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-score")]),a("td",[s._v("是否显示当前分数，show-score 和 show-text 不能同时为真")]),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("score-template")]),a("td",[s._v("分数显示模板")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("{value}")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("分值改变时触发")]),t("td",[this._v("改变后的分值")])])])])}],!1,null,null,null);l.options.__file="rate.md";t.default=l.exports},,,function(s,t,a){"use strict";a.r(t);var e={data:function(){return{visible:!1,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 弄"}]}}},r=(a(438),a(0)),l=Object(r.a)(e,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:'\n\n\n',script:"\n export default {\n data() {\n return {\n visible: false\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-popover",{attrs:{placement:"top-start",title:"标题",width:"200",trigger:"hover",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[s._v("hover 激活")])],1),a("el-popover",{attrs:{placement:"bottom",title:"标题",width:"200",trigger:"click",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[s._v("click 激活")])],1),a("el-popover",{ref:"popover",attrs:{placement:"right",title:"标题",width:"200",trigger:"focus",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[s._v("focus 激活")]),a("el-popover",{attrs:{placement:"bottom",title:"标题",width:"200",trigger:"manual",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"},model:{value:s.visible,callback:function(t){s.visible=t},expression:"visible"}},[a("el-button",{attrs:{slot:"reference"},on:{click:function(t){s.visible=!s.visible}},slot:"reference"},[s._v("手动激活")])],1)]],2),a("p",[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("manual")]),s._v("。对于触发 Popover 的元素，有两种写法：使用 "),a("code",[s._v('slot="reference"')]),s._v(" 的具名插槽，或使用自定义指令"),a("code",[s._v("v-popover")]),s._v("指向 Popover 的索引"),a("code",[s._v("ref")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top-start"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"标题"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(">")]),s._v("hover 激活"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"标题"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(">")]),s._v("click 激活"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"popover"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"标题"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"focus"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-popover:popover")]),s._v(">")]),s._v("focus 激活"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"标题"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"manual"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"visible"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"visible = !visible"')]),s._v(">")]),s._v("手动激活"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("visible")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n click 激活\n\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",attrs:{slot:"source"},slot:"source"},[a("el-popover",{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),a("el-button",{attrs:{slot:"reference"},slot:"reference"},[s._v("click 激活")])],1)],1),a("p",[s._v("利用分发取代"),a("code",[s._v("content")]),s._v("属性")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"400"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"gridData"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(">")]),s._v("click 激活"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("gridData")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }]\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("当然，你还可以嵌套操作，这相比 Dialog 更为轻量：")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n

    这是一段内容这是一段内容确定删除吗？

    \n
    \n 取消\n 确定\n
    \n 删除\n    \n\n\n',script:"\n export default {\n data() {\n return {\n visible2: false,\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-popover",{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",{attrs:{slot:"reference"},slot:"reference"},[s._v("删除")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"160"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"visible2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("这是一段内容这是一段内容确定删除吗？"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"visible2 = false"')]),s._v(">")]),s._v("取消"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"visible2 = false"')]),s._v(">")]),s._v("确定"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(">")]),s._v("删除"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("visible2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"popover-dan-chu-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover-dan-chu-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover 弹出框")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("Popover 的属性与 Tooltip 很类似，它们都是基于"),t("code",{pre:!0},[this._v("Vue-popper")]),this._v("开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"qian-tao-xin-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-xin-xi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 嵌套信息")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"qian-tao-cao-zuo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-cao-zuo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 嵌套操作")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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",{pre:!0},[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",{pre:!0},[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("—")])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("触发方式为 hover 时的显示延迟，单位为毫秒")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("参数")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Popover 内嵌 HTML 文本")])]),t("tr",[t("td",[this._v("reference")]),t("td",[this._v("触发 Popover 显示的 HTML 元素")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._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("after-enter")]),a("td",[s._v("显示动画播放完毕后触发")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("hide")]),a("td",[s._v("隐藏时触发")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("after-leave")]),a("td",[s._v("隐藏动画播放完毕后触发")]),a("td",[s._v("—")])])])])}],!1,null,null,null);l.options.__file="popover.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e=a(1),r={methods:{handleSizeChange:function(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];Object(e.a)(t,"first"),Object(e.a)(a,"last")})}},l=(a(437),a(0)),n=Object(l.a)(r,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:'
    \n 页数较少时的效果\n \n \n
    \n
    \n 大于 7 页时的效果\n \n \n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("页数较少时的效果"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("大于 7 页时的效果"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1),a("p",[s._v("默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过"),a("code",[s._v("pager-count")]),s._v("属性可以设置最大页码按钮数。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":pager-count")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1),a("p",[s._v("设置"),a("code",[s._v("background")]),s._v("属性可以为分页按钮添加背景色。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("background")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("在空间有限的情况下，可以使用简单的小型分页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("small")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("根据场景需要，可以添加其他功能模块。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n methods: {\n handleSizeChange(val) {\n console.log(`每页 ${val} 条`);\n },\n handleCurrentChange(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",attrs:{slot:"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,"update:currentPage":function(t){s.currentPage1=t}}})],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,"update:currentPage":function(t){s.currentPage2=t}}})],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,"update:currentPage":function(t){s.currentPage3=t}}})],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("显示总数"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"currentPage1"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"total, prev, pager, next"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("调整每页显示条数"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"currentPage2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":page-sizes")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizes, prev, pager, next"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("直接前往"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"currentPage3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prev, pager, next, jumper"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("完整功能"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":current-page")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"currentPage4"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":page-sizes")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"400"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleSizeChange(val) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`每页 "),a("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${val}")]),s._v(" 条`")]),s._v(");\n },\n handleCurrentChange(val) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`当前页: "),a("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${val}")]),s._v("`")]),s._v(");\n }\n },\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("currentPage1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("currentPage2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("currentPage3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("currentPage4")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4")]),s._v("\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"pagination-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pagination 分页")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"she-zhi-zui-da-ye-ma-an-niu-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-zui-da-ye-ma-an-niu-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 设置最大页码按钮数")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-you-bei-jing-se-de-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bei-jing-se-de-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有背景色的分页")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"xiao-xing-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xing-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 小型分页")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"fu-jia-gong-neng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-jia-gong-neng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 附加功能")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("background")]),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("每页显示条目个数，支持 .sync 修饰符")]),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("pager-count")]),a("td",[s._v("页码按钮的数量，当总页数超过该值时会折叠")]),a("td",[s._v("number")]),a("td",[s._v("大于等于 5 且小于等于 21 的奇数")]),a("td",[s._v("7")])]),a("tr",[a("td",[s._v("current-page")]),a("td",[s._v("当前页数，支持 .sync 修饰符")]),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",{pre:!0},[s._v("sizes")]),s._v(", "),a("code",{pre:!0},[s._v("prev")]),s._v(", "),a("code",{pre:!0},[s._v("pager")]),s._v(", "),a("code",{pre:!0},[s._v("next")]),s._v(", "),a("code",{pre:!0},[s._v("jumper")]),s._v(", "),a("code",{pre:!0},[s._v("->")]),s._v(", "),a("code",{pre:!0},[s._v("total")]),s._v(", "),a("code",{pre:!0},[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]")])]),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("prev-text")]),a("td",[s._v("替代图标显示的上一页文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next-text")]),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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._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("tr",[a("td",[s._v("current-change")]),a("td",[s._v("currentPage 改变时会触发")]),a("td",[s._v("当前页")])]),a("tr",[a("td",[s._v("prev-click")]),a("td",[s._v("用户点击上一页按钮改变当前页后触发")]),a("td",[s._v("当前页")])]),a("tr",[a("td",[s._v("next-click")]),a("td",[s._v("用户点击下一页按钮改变当前页后触发")]),a("td",[s._v("当前页")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("自定义内容，需要在 "),t("code",{pre:!0},[this._v("layout")]),this._v(" 中列出 "),t("code",{pre:!0},[this._v("slot")])])])])])}],!1,null,null,null);n.options.__file="pagination.md";t.default=n.exports},function(s,t,a){"use strict";a.r(t);var e={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,t=this.$createElement;this.$msgbox({title:"消息",message:t("p",null,[t("span",null,"内容可以是 "),t("i",{style:"color: teal"},"VNode")]),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)})},open5:function(){this.$alert("这是 HTML 片段","HTML 片段",{dangerouslyUseHTMLString:!0})},open6:function(){var s=this;this.$confirm("检测到未保存的内容，是否在离开页面前保存修改？","确认信息",{distinguishCancelAndClose:!0,confirmButtonText:"保存",cancelButtonText:"放弃修改"}).then(function(){s.$message({type:"info",message:"保存修改"})}).catch(function(t){s.$message({type:"info",message:"cancel"===t?"放弃保存并离开页面":"停留在当前页面"})})},open7:function(){var s=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning",center:!0}).then(function(){s.$message({type:"success",message:"删除成功!"})}).catch(function(){s.$message({type:"info",message:"已取消删除"})})}}},r=a(0),l=Object(r.a)(e,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("p",[s._v("当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$alert("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是一段内容'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'标题名称'")]),s._v(", {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'确定'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("callback")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("action")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("`action: "),a("span",{pre:!0,attrs:{class:"hljs-subst"}},[s._v("${ action }")]),s._v("`")]),s._v("\n });\n }\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open2() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'此操作将永久删除该文件, 是否继续?'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'提示'")]),s._v(", {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'确定'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'取消'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n }).then("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'删除成功!'")]),s._v("\n });\n }).catch("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'已取消删除'")]),s._v("\n }); \n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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("false")]),s._v("或字符串时均表示校验未通过，同时返回的字符串相当于定义了"),a("code",[s._v("inputErrorMessage")]),s._v("字段。此外，可以用"),a("code",[s._v("inputPlaceholder")]),s._v("字段来定义输入框的占位符。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open3() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$prompt("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'请输入邮箱'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'提示'")]),s._v(", {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'确定'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'取消'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inputPattern")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-regexp"}},[s._v("/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("inputErrorMessage")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'邮箱格式不正确'")]),s._v("\n }).then("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("{ value }")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'你的邮箱是: '")]),s._v(" + value\n });\n }).catch("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'取消输入'")]),s._v("\n }); \n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("可自定义配置不同内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open4() {\n const h = this.$createElement;\n this.$msgbox({\n title: '消息',\n message: h('p', null, [\n h('span', null, '内容可以是 '),\n h('i', { style: 'color: teal' }, 'VNode')\n ]),\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open4() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$msgbox({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", [\n h("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'span'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'内容可以是 '")]),s._v("),\n h("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'VNode'")]),s._v(")\n ]),\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("showCancelButton")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'确定'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'取消'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("beforeClose")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(") {\n instance.confirmButtonLoading = "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n instance.confirmButtonText = "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'执行中...'")]),s._v(";\n setTimeout("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n done();\n setTimeout("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n instance.confirmButtonLoading = "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }, "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v(");\n }, "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(");\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n done();\n }\n }\n }).then("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("action")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'action: '")]),s._v(" + action\n });\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open5() {\n this.$alert('这是 HTML 片段', 'HTML 片段', {\n dangerouslyUseHTMLString: true\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open5}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("将"),a("code",[s._v("dangerouslyUseHTMLString")]),s._v("属性设置为 true，"),a("code",[s._v("message")]),s._v(" 就会被当作 HTML 片段处理。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open5() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$alert("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是 HTML 片段'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'HTML 片段'")]),s._v(", {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),a("p",[s._v("有些场景下，点击取消按钮与点击关闭按钮有着不同的含义。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open6() {\n this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {\n distinguishCancelAndClose: true,\n confirmButtonText: '保存',\n cancelButtonText: '放弃修改'\n })\n .then(() => {\n this.$message({\n type: 'info',\n message: '保存修改'\n });\n })\n .catch(action => {\n this.$message({\n type: 'info',\n message: action === 'cancel'\n ? '放弃保存并离开页面'\n : '停留在当前页面'\n })\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open6}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和"),a("code",[s._v("callback")]),s._v("回调的参数均为 'cancel'。如果将"),a("code",[s._v("distinguishCancelAndClose")]),s._v("属性设置为 true，则上述两种行为的参数分别为 'cancel' 和 'close'。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open6() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'检测到未保存的内容，是否在离开页面前保存修改？'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'确认信息'")]),s._v(", {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("distinguishCancelAndClose")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'保存'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'放弃修改'")]),s._v("\n })\n .then("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'保存修改'")]),s._v("\n });\n })\n .catch("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("action")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": action === "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v("\n ? "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'放弃保存并离开页面'")]),s._v("\n : "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'停留在当前页面'")]),s._v("\n })\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("内容支持居中布局")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open7() {\n this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n type: 'warning',\n center: true\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",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open7}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("将 "),a("code",[s._v("center")]),s._v(" 设置为 "),a("code",[s._v("true")]),s._v(" 即可开启居中布局")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open7"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open7() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'此操作将永久删除该文件, 是否继续?'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'提示'")]),s._v(", {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'确定'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'取消'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }).then("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'删除成功!'")]),s._v("\n });\n }).catch("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'已取消删除'")]),s._v("\n });\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),a("p",[s._v("那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。")]),s._m(18),s._m(19)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"messagebox-dan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox-dan-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox 弹框")])},function(){var s=this.$createElement,t=this._self._c||s;return t("div",{staticClass:"tip"},[t("p",[this._v("从场景上说，MessageBox 的作用是美化系统自带的 "),t("code",{pre:!0},[this._v("alert")]),this._v("、"),t("code",{pre:!0},[this._v("confirm")]),this._v(" 和 "),t("code",{pre:!0},[this._v("prompt")]),this._v("，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 消息提示")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"que-ren-xiao-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#que-ren-xiao-xi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 确认消息")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ti-jiao-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ti-jiao-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 提交内容")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("弹出层的内容可以是 "),a("code",{pre:!0},[s._v("VNode")]),s._v("，所以我们能把一些自定义组件传入其中。每次弹出层打开后，Vue 会对新老 "),a("code",{pre:!0},[s._v("VNode")]),s._v(" 节点进行比对，然后将根据比较结果进行最小单位地修改视图。这也许会造成弹出层内容区域的组件没有重新渲染，例如 "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[s._v("#8931")]),s._v("。当这类问题出现时，解决方案是给 "),a("code",{pre:!0},[s._v("VNode")]),s._v(" 加上一个不相同的 key，参考"),a("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef/"}},[s._v("这里")]),s._v("。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[t("code",{pre:!0},[this._v("message")]),this._v(" 属性支持传入 HTML 片段。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS 攻击")]),s._v("。因此在 "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" 打开的情况下，请确保 "),a("code",{pre:!0},[s._v("message")]),s._v(" 的内容是可信的，"),a("strong",[s._v("永远不要")]),s._v("将用户提交的内容赋值给 "),a("code",{pre:!0},[s._v("message")]),s._v(" 属性。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"qu-fen-qu-xiao-yu-guan-bi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qu-fen-qu-xiao-yu-guan-bi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 区分取消与关闭")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ju-zhong-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中布局")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 "),t("code",{pre:!0},[this._v("MessageBox")]),this._v("。调用参数为：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("$msgbox(options)")])]),a("li",[a("code",{pre:!0},[s._v("$alert(message, title, options)")]),s._v(" 或 "),a("code",{pre:!0},[s._v("$alert(message, options)")])]),a("li",[a("code",{pre:!0},[s._v("$confirm(message, title, options)")]),s._v(" 或 "),a("code",{pre:!0},[s._v("$confirm(message, options)")])]),a("li",[a("code",{pre:!0},[s._v("$prompt(message, title, options)")]),s._v(" 或 "),a("code",{pre:!0},[s._v("$prompt(message, options)")])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单独引用")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("如果单独引入 "),t("code",{pre:!0},[this._v("MessageBox")]),this._v("：")])},function(){var s=this.$createElement,t=this._self._c||s;return t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("import")]),this._v(" { MessageBox } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("from")]),this._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[this._v("'element-ui'")]),this._v(";\n")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._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 / VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("dangerouslyUseHTMLString")]),a("td",[s._v("是否将 message 属性作为 HTML 片段处理")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),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("iconClass")]),a("td",[s._v("自定义图标的类名，会覆盖 "),a("code",{pre:!0},[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("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'或'close', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("MessageBox 是否显示右上角关闭按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("beforeClose")]),a("td",[s._v("MessageBox 关闭前的回调，会暂停实例的关闭")]),a("td",[s._v("function(action, instance, done)，action 的值为'confirm', 'cancel'或'close'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("distinguishCancelAndClose")]),a("td",[s._v("是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),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("closeOnHashChange")]),a("td",[s._v("是否在 hashchange 时关闭 MessageBox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),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("inputType")]),a("td",[s._v("输入框的类型")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("text")])]),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("输入的数据不合法!")])]),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")])]),a("tr",[a("td",[s._v("roundButton")]),a("td",[s._v("是否使用圆角按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],!1,null,null,null);l.options.__file="message-box.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={data:function(){return{activeIndex:"1",activeIndex2:"1",isCollapse:!0}},methods:{handleOpen:function(s,t){console.log(s,t)},handleClose:function(s,t){console.log(s,t)},handleSelect:function(s,t){console.log(s,t)}}},r=(a(434),a(0)),l=Object(r.a)(e,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:'\n 处理中心\n \n \n 选项1\n 选项2\n 选项3\n \n \n 选项1\n 选项2\n 选项3\n \n \n 消息中心\n 订单管理\n\n
    \n\n 处理中心\n \n \n 选项1\n 选项2\n 选项3\n \n \n 选项1\n 选项2\n 选项3\n \n \n 消息中心\n 订单管理\n\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",attrs:{slot:"source"},slot:"source"},[a("el-menu",{staticClass:"el-menu-demo",attrs:{"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")]),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"2-4-2"}},[s._v("选项2")]),a("el-menu-item",{attrs:{index:"2-4-3"}},[s._v("选项3")])],2)],2),a("el-menu-item",{attrs:{index:"3",disabled:""}},[s._v("消息中心")]),a("el-menu-item",{attrs:{index:"4"}},[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","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},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")]),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"2-4-2"}},[s._v("选项2")]),a("el-menu-item",{attrs:{index:"2-4-3"}},[s._v("选项3")])],2)],2),a("el-menu-item",{attrs:{index:"3",disabled:""}},[s._v("消息中心")]),a("el-menu-item",{attrs:{index:"4"}},[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("组件可以生成二级菜单。Menu 还提供了"),a("code",[s._v("background-color")]),s._v("、"),a("code",[s._v("text-color")]),s._v("和"),a("code",[s._v("active-text-color")]),s._v("，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-active")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"activeIndex"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("mode")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"horizontal"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("处理中心"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("我的工作台"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("选项2"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("选项3"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4-1"')]),s._v(">")]),s._v("选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4-2"')]),s._v(">")]),s._v("选项2"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4-3"')]),s._v(">")]),s._v("选项3"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("消息中心"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("target")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"_blank"')]),s._v(">")]),s._v("订单管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-active")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"activeIndex2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-menu-demo"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("mode")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"horizontal"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("background-color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#545c64"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#fff"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-text-color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#ffd04b"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("处理中心"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("我的工作台"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("选项2"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("选项3"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4-1"')]),s._v(">")]),s._v("选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4-2"')]),s._v(">")]),s._v("选项2"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4-3"')]),s._v(">")]),s._v("选项3"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("消息中心"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("target")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"_blank"')]),s._v(">")]),s._v("订单管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("activeIndex")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("activeIndex2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleSelect(key, keyPath) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("垂直菜单，可内嵌子菜单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    默认颜色
    \n \n \n \n \n \n 选项1\n 选项2\n \n \n 选项3\n \n \n \n 选项1\n \n \n \n \n 导航二\n \n \n \n 导航三\n \n \n \n 导航四\n \n \n     \n \n
    自定义颜色
    \n \n \n \n \n \n 选项1\n 选项2\n \n \n 选项3\n \n \n \n 选项1\n \n \n \n \n 导航二\n \n \n \n 导航三\n \n \n \n 导航四\n \n \n     \n    \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",attrs:{slot:"source"},slot:"source"},[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:12}},[a("h5",[s._v("默认颜色")]),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-location"}),a("span",[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"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航二")])]),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航三")])]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航四")])])],1)],1),a("el-col",{attrs:{span:12}},[a("h5",[s._v("自定义颜色")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-location"}),a("span",[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"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航二")])]),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航三")])]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航四")])])],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tac"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h5")]),s._v(">")]),s._v("默认颜色"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-location"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("导航一"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("分组一"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("选项2"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"分组2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("选项3"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("导航二"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-document"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("导航三"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("导航四"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h5")]),s._v(">")]),s._v("自定义颜色"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("background-color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#545c64"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#fff"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("active-text-color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#ffd04b"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-location"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("导航一"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("分组一"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("选项2"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"分组2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("选项3"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("导航二"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-document"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("导航三"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("导航四"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleOpen(key, keyPath) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n },\n handleClose(key, keyPath) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n 展开\n 收起\n\n\n \n \n \n 分组一\n 选项1\n 选项2\n \n \n 选项3\n \n \n 选项4\n 选项1\n \n \n \n \n 导航二\n \n \n \n 导航三\n \n \n \n 导航四\n \n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n isCollapse: true\n };\n },\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:"\n .el-menu-vertical-demo:not(.el-menu--collapse) {\n width: 200px;\n min-height: 400px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:s.isCollapse,callback:function(t){s.isCollapse=t},expression:"isCollapse"}},[a("el-radio-button",{attrs:{label:!1}},[s._v("展开")]),a("el-radio-button",{attrs:{label:!0}},[s._v("收起")])],1),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"1-4-1",collapse:s.isCollapse},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-location"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航一")])]),a("el-menu-item-group",[a("span",{attrs:{slot:"title"},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")])],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("span",{attrs:{slot:"title"},slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("选项1")])],1)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航二")])]),a("el-menu-item",{attrs:{index:"3",disabled:""}},[a("i",{staticClass:"el-icon-document"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航三")])]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-setting"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("导航四")])])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"isCollapse"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("展开"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("收起"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":collapse")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"isCollapse"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-location"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("导航一"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("分组一"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("选项2"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"分组2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("选项3"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("导航二"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-document"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("导航三"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("导航四"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-menu-vertical-demo")]),a("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":not(.el-menu--collapse)")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("min-height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("400px")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("isCollapse")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleOpen(key, keyPath) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n },\n handleClose(key, keyPath) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[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),s._m(15)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"navmenu-dao-hang-cai-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu-dao-hang-cai-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu 导航菜单")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ding-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-lan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 顶栏")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ce-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ce-lan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 侧栏")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zhe-die"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhe-die","aria-hidden":"true"}},[this._v("¶")]),this._v(" 折叠")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"menu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._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("collapse")]),a("td",[s._v("是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("background-color")]),a("td",[s._v("菜单的背景色（仅支持 hex 格式）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("菜单的文字颜色（仅支持 hex 格式）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#303133")])]),a("tr",[a("td",[s._v("active-text-color")]),a("td",[s._v("当前激活菜单的文字颜色（仅支持 hex 格式）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])]),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("当前打开的 sub-menu 的 index 的数组")]),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("hover / click")]),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")])]),a("tr",[a("td",[s._v("collapse-transition")]),a("td",[s._v("是否开启折叠动画")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"menu-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu 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("open")]),a("td",[s._v("展开指定的 sub-menu")]),a("td",[s._v("index: 需要打开的 sub-menu 的 index")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("收起指定的 sub-menu")]),a("td",[s._v("index: 需要收起的 sub-menu 的 index")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"menu-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[this._v("¶")]),this._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: 选中菜单项的 index, indexPath: 选中菜单项的 index path")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("sub-menu 展开的回调")]),a("td",[s._v("index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("sub-menu 收起的回调")]),a("td",[s._v("index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"submenu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._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("—")])]),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("show-timeout")]),a("td",[s._v("展开 sub-menu 的延时")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("hide-timeout")]),a("td",[s._v("收起 sub-menu 的延时")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),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("popper-append-to-body")]),a("td",[s._v("是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("一级子菜单：true / 非一级子菜单：false")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"menu-item-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Item Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._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("—")])]),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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"menu-group-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Group Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._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("—")])])])])}],!1,null,null,null);l.options.__file="menu.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={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},2e3)},openFullScreen2:function(){var s=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){s.close()},2e3)}}},r=(a(433),a(0)),l=Object(r.a)(e,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:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading,expression:"loading"}],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-loading")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"loading"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("body")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("loading")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可自定义加载文案、图标和背景色。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"拼命加载中","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",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("code",[s._v("element-loading-spinner")]),s._v("和"),a("code",[s._v("element-loading-background")]),s._v("属性分别用来设定图标类名和背景色值。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-loading")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"loading2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("element-loading-text")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"拼命加载中"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("element-loading-spinner")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-loading"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("element-loading-background")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"rgba(0, 0, 0, 0.8)"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("loading2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("页面数据加载时显示。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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 }, 2000);\n },\n openFullScreen2() {\n const loading = this.$loading({\n lock: true,\n text: 'Loading',\n spinner: 'el-icon-loading',\n background: 'rgba(0, 0, 0, 0.7)'\n });\n setTimeout(() => {\n loading.close();\n }, 2000);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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 指令方式\n ")]),a("el-button",{attrs:{type:"primary"},on:{click:s.openFullScreen2}},[s._v("\n 服务方式\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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"openFullScreen"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-loading.fullscreen.lock")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n 指令方式\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"openFullScreen2"')]),s._v(">")]),s._v("\n 服务方式\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fullscreenLoading")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n }\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n openFullScreen() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n setTimeout("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }, "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(");\n },\n openFullScreen2() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" loading = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$loading({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lock")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("spinner")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'el-icon-loading'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("background")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rgba(0, 0, 0, 0.7)'")]),s._v("\n });\n setTimeout("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n loading.close();\n }, "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(");\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[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)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"loading-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading 加载")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"qu-yu-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qu-yu-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 区域加载")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zheng-ye-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zheng-ye-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 整页加载")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"fu-wu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-wu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 服务")])},function(){var s=this.$createElement,t=this._self._c||s;return t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("import")]),this._v(" { Loading } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("from")]),this._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[this._v("'element-ui'")]),this._v(";\n")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[this._v("Loading.service(options);\n")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("其中 "),t("code",{pre:!0},[this._v("options")]),this._v(" 参数为 Loading 的配置项，具体见下表。"),t("code",{pre:!0},[this._v("LoadingService")]),this._v(" 会返回一个 Loading 实例，可通过调用该实例的 "),t("code",{pre:!0},[this._v("close")]),this._v(" 方法来关闭它：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$nextTick("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" { "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 以服务的方式调用的 Loading 需要异步关闭")]),s._v("\n loadingInstance.close();\n});\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fullscreen")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(" });\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fullscreen")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(" });\n"),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// true")]),s._v("\n")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("此时调用它们中任意一个的 "),t("code",{pre:!0},[this._v("close")]),this._v(" 方法都能关闭这个全屏 Loading。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 "),t("code",{pre:!0},[this._v("$loading")]),this._v("，它的调用方式为："),t("code",{pre:!0},[this._v("this.$loading(options)")]),this._v("，同样会返回一个 Loading 实例。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._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",{pre:!0},[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",{pre:!0},[s._v("v-loading")]),s._v(" 指令中的 "),a("code",{pre:!0},[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",{pre:!0},[s._v("v-loading")]),s._v(" 指令中的 "),a("code",{pre:!0},[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",{pre:!0},[s._v("v-loading")]),s._v(" 指令中的 "),a("code",{pre:!0},[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("spinner")]),a("td",[s._v("自定义加载图标类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("background")]),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("—")])])])])}],!1,null,null,null);l.options.__file="loading.md";t.default=l.exports},,,function(s,t,a){"use strict";a.r(t);var e={data:function(){return{restaurants:[],input:"",input1:"",input2:"",input21:"",input22:"",input23:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",input10:"",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;t(s?a.filter(this.createStateFilter(s)):a)},querySearchAsync:function(s,t){var a=this.restaurants,e=s?a.filter(this.createStateFilter(s)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(e)},3e3*Math.random())},createStateFilter:function(s){return function(t){return 0===t.value.toLowerCase().indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.restaurants=this.loadAll()}},r=(a(431),a(0)),l=Object(r.a)(e,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:'\n\n\n',script:"\nexport default {\n data() {\n return {\n input: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input1: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input1"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n input10: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{placeholder:"请输入内容",clearable:""},model:{value:s.input10,callback:function(t){s.input10=t},expression:"input10"}})],1),a("p",[s._v("使用"),a("code",[s._v("clearable")]),s._v("属性即可得到一个可清空的输入框")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input10"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("clearable")]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input10")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("带有图标标记输入类型")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n 属性方式：\n \n \n \n \n
    \n
    \n slot 方式：\n \n \n \n \n \n \n
    \n\n\n',script:"\nexport default {\n data() {\n return {\n input2: '',\n input21: '',\n input22: '',\n input23: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"demo-input-suffix"},[s._v("\n 属性方式：\n "),a("el-input",{attrs:{placeholder:"请选择日期","suffix-icon":"el-icon-date"},model:{value:s.input2,callback:function(t){s.input2=t},expression:"input2"}}),a("el-input",{attrs:{placeholder:"请输入内容","prefix-icon":"el-icon-search"},model:{value:s.input21,callback:function(t){s.input21=t},expression:"input21"}})],1),a("div",{staticClass:"demo-input-suffix"},[s._v("\n slot 方式：\n "),a("el-input",{attrs:{placeholder:"请选择日期"},model:{value:s.input22,callback:function(t){s.input22=t},expression:"input22"}},[a("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input23,callback:function(t){s.input23=t},expression:"input23"}},[a("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)]),a("p",[s._v("可以通过 "),a("code",[s._v("prefix-icon")]),s._v(" 和 "),a("code",[s._v("suffix-icon")]),s._v(" 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-input-suffix"')]),s._v(">")]),s._v("\n 属性方式：\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("suffix-icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prefix-icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input21"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-input-suffix"')]),s._v(">")]),s._v("\n slot 方式：\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input22"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"suffix"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-input__icon el-icon-date"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input23"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prefix"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-input__icon el-icon-search"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input21")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input22")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input23")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":rows")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("textarea")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n
    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea2: '',\n textarea3: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("autosize")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea2"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin: 20px 0;"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":autosize")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"{ minRows: 2, maxRows: 4}"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea3"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("textarea2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("textarea3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("可前置或后置元素，一般为标签或按钮")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n \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: 130px;\n }\n .input-with-select .el-input-group__prepend {\n background-color: #fff;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"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",{staticClass:"input-with-select",attrs:{placeholder:"请输入内容"},model:{value:s.input5,callback:function(t){s.input5=t},expression:"input5"}},[a("el-select",{attrs:{slot:"prepend",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:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)]),a("p",[s._v("可通过 slot 来指定在 input 中前置或者后置内容。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input3"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prepend"')]),s._v(">")]),s._v("Http://"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input4"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"append"')]),s._v(">")]),s._v(".com"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input5"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input-with-select"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"select"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"prepend"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"餐厅名"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"订单号"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"用户电话"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"append"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-input")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("130px")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".input-with-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-input-group__prepend")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input4")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input5")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("select")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n \n \n \n \n \n
    \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",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:s.input6,callback:function(t){s.input6=t},expression:"input6"}}),a("el-input",{attrs:{size:"medium",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:s.input7,callback:function(t){s.input7=t},expression:"input7"}}),a("el-input",{attrs:{size:"small",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:s.input8,callback:function(t){s.input8=t},expression:"input8"}}),a("el-input",{attrs:{size:"mini",placeholder:"请输入内容","suffix-icon":"el-icon-date"},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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-input-size"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("suffix-icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input6"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("suffix-icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input7"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("suffix-icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input8"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("suffix-icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"input9"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input6")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input7")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input8")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("input9")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("根据输入内容提供对应的输入建议")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    激活即列出输入建议
    \n \n     \n \n
    输入后匹配输入建议
    \n \n     \n    \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.toLowerCase().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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-autocomplete"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sub-title"')]),s._v(">")]),s._v("激活即列出输入建议"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"inline-input"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"state1"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n >")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sub-title"')]),s._v(">")]),s._v("输入后匹配输入建议"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"inline-input"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"state2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":trigger-on-focus")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n >")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("restaurants")]),s._v(": [],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n querySearch(queryString, cb) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" restaurants = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".restaurants;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : restaurants;\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 调用 callback 返回建议列表的数据")]),s._v("\n cb(results);\n },\n createFilter(queryString) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("restaurant")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n };\n },\n loadAll() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区新渔路144号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"天山西路438号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"贡茶"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"十二泷町"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"NONO JUICE 鲜榨果汁"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"枪会山"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"纵食"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"钱记"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"壹杯加"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区通协路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区新渔路144号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"港式小铺"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"剑河路443-1"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"动力鸡车"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"天山西路430号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"天山西路428号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"天山西路389号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),s._v(" }\n ];\n },\n handleSelect(item) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n }\n },\n mounted() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".restaurants = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("可自定义输入建议的显示")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n\n\n\n\n',script:'\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.toLowerCase().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",attrs:{slot:"source"},slot:"source"},[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,placeholder:"请输入内容"},on:{select:s.handleSelect},scopedSlots:s._u([{key:"default",fn:function(t){var e=t.item;return[a("div",{staticClass:"name"},[s._v(s._s(e.value))]),a("span",{staticClass:"addr"},[s._v(s._s(e.address))])]}}]),model:{value:s.state3,callback:function(t){s.state3=t},expression:"state3"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:s.handleIconClick},slot:"suffix"})])],1),a("p",[s._v("使用"),a("code",[s._v("scoped slot")]),s._v("自定义输入建议的模板。该 scope 的参数为"),a("code",[s._v("item")]),s._v("，表示当前输入建议对象。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("popper-class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"my-autocomplete"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"state3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-edit el-input__icon"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"suffix"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleIconClick"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"{ item }"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),s._v("{{ item.value }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"addr"')]),s._v(">")]),s._v("{{ item.address }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"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",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("restaurants")]),s._v(": [],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n querySearch(queryString, cb) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" restaurants = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".restaurants;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : restaurants;\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 调用 callback 返回建议列表的数据")]),s._v("\n cb(results);\n },\n createFilter(queryString) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("restaurant")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n };\n },\n loadAll() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区新渔路144号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"天山西路438号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"贡茶"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"十二泷町"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"NONO JUICE 鲜榨果汁"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"枪会山"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"纵食"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"钱记"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"壹杯加"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区通协路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区新渔路144号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"港式小铺"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"剑河路443-1"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"动力鸡车"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"天山西路430号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"天山西路428号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"天山西路389号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),s._v(" }\n ];\n },\n handleSelect(item) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n },\n handleIconClick(ev) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(ev);\n }\n },\n mounted() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".restaurants = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("从服务端搜索数据")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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.toLowerCase().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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"state4"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"querySearchAsync"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请输入内容"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n>")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("restaurants")]),s._v(": [],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state4")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("timeout")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n loadAll() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区新渔路144号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"天山西路438号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"贡茶"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"十二泷町"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"NONO JUICE 鲜榨果汁"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"枪会山"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"纵食"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"钱记"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"壹杯加"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区通协路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区新渔路144号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"港式小铺"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"剑河路443-1"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"动力鸡车"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"天山西路430号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"天山西路428号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"天山西路389号"')]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),s._v(" }\n ];\n },\n querySearchAsync(queryString, cb) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" restaurants = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".restaurants;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createStateFilter(queryString)) : restaurants;\n\n clearTimeout("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".timeout);\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".timeout = setTimeout("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n cb(results);\n }, "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".random());\n },\n createStateFilter(queryString) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("state")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n };\n },\n handleSelect(item) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n }\n },\n mounted() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".restaurants = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(14),s._m(15),s._m(16),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),s._m(27),s._m(28),s._m(29),s._m(30),s._m(31)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"input-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input 输入框")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ke-qing-kong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可清空")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-icon-de-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-icon-de-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带 icon 的输入框")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"wen-ben-yu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-ben-yu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文本域")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("用于输入多行文本信息，通过将 "),t("code",{pre:!0},[this._v("type")]),this._v(" 属性的值指定为 textarea。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可自适应文本高度的文本域")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("通过设置 "),t("code",{pre:!0},[this._v("autosize")]),this._v(" 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 "),t("code",{pre:!0},[this._v("autosize")]),this._v(" 还可以设定为一个对象，指定最小行数和最大行数。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"fu-he-xing-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-he-xing-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 复合型输入框")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 尺寸")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-shu-ru-jian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-shu-ru-jian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带输入建议")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义模板")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 远程搜索")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"input-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types"}},[s._v("原生 input 的 type 值")])]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("value / v-model")]),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("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("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",{pre:!0},[s._v('type!="textarea"')]),s._v(" 时有效")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prefix-icon")]),a("td",[s._v("输入框头部图标")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("suffix-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",{pre:!0},[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",{pre:!0},[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("autocomplete")]),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("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("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("tabindex")]),a("td",[s._v("输入框的tabindex")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("validate-event")]),a("td",[s._v("输入时是否触发表单的校验")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("true")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"input-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Slots")])},function(){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("prefix")]),a("td",[s._v("输入框头部内容，只对 "),a("code",{pre:!0},[s._v('type="text"')]),s._v(" 有效")])]),a("tr",[a("td",[s._v("suffix")]),a("td",[s._v("输入框尾部内容，只对 "),a("code",{pre:!0},[s._v('type="text"')]),s._v(" 有效")])]),a("tr",[a("td",[s._v("prepend")]),a("td",[s._v("输入框前置内容，只对 "),a("code",{pre:!0},[s._v('type="text"')]),s._v(" 有效")])]),a("tr",[a("td",[s._v("append")]),a("td",[s._v("输入框后置内容，只对 "),a("code",{pre:!0},[s._v('type="text"')]),s._v(" 有效")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"input-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[this._v("¶")]),this._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("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)")])]),a("tr",[a("td",[s._v("clear")]),a("td",[s._v("在点击由 "),a("code",{pre:!0},[s._v("clearable")]),s._v(" 属性生成的清空按钮时触发")]),a("td",[s._v("—")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"input-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input 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("focus")]),a("td",[s._v("使 input 获取焦点")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("使 input 失去焦点")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("select")]),a("td",[s._v("选中 input 中的文字")]),a("td",[s._v("—")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"autocomplete-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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-key")]),a("td",[s._v("输入建议对象中用于显示的键名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])]),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("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("placement")]),a("td",[s._v("菜单弹出位置")]),a("td",[s._v("string")]),a("td",[s._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),a("td",[s._v("bottom-start")])]),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("name")]),a("td",[s._v("原生属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("select-when-unmatched")]),a("td",[s._v("在输入没有任何匹配建议的情况下，按下回车是否触发 "),a("code",{pre:!0},[s._v("select")]),s._v(" 事件")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),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("prefix-icon")]),a("td",[s._v("输入框头部图标")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("suffix-icon")]),a("td",[s._v("输入框尾部图标")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("hide-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("popper-append-to-body")]),a("td",[s._v("是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("true")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"autocomplete-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Slots")])},function(){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("prefix")]),a("td",[s._v("输入框头部内容")])]),a("tr",[a("td",[s._v("suffix")]),a("td",[s._v("输入框尾部内容")])]),a("tr",[a("td",[s._v("prepend")]),a("td",[s._v("输入框前置内容")])]),a("tr",[a("td",[s._v("append")]),a("td",[s._v("输入框后置内容")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"autocomplete-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Scoped Slot")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("自定义输入建议，参数为 { item }")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"autocomplete-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Events")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("select")]),t("td",[this._v("点击选中建议项时触发")]),t("td",[this._v("选中建议项")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"autocomplete-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Methods")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("-")])])])])}],!1,null,null,null);l.options.__file="input.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e=a(248),r={data:function(){return{icons:e}}},l=(a(429),a(0)),n=Object(l.a)(r,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:'\n\n\n搜索\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("i",{staticClass:"el-icon-edit"}),a("i",{staticClass:"el-icon-share"}),a("i",{staticClass:"el-icon-delete"}),a("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[s._v("搜索")])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(">")]),s._v("搜索"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[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}),a("span",{staticClass:"icon-name"},[s._v(s._s("el-icon-"+t))])])])}),0)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"icon-tu-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-tu-biao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon 图标")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shi-yong-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用方法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("直接通过设置类名为 "),t("code",{pre:!0},[this._v("el-icon-iconName")]),this._v(" 来使用即可。例如：")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"tu-biao-ji-he"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-ji-he","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标集合")])}],!1,null,null,null);n.options.__file="icon.md";t.default=n.exports},,function(s,t,a){"use strict";a.r(t);var e={data:function(){var s=this;return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},sizeForm:{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:function(t,a,e){""===a?e(new Error("请输入密码")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),e())},trigger:"blur"}],checkPass:[{validator:function(t,a,e){""===a?e(new Error("请再次输入密码")):a!==s.ruleForm2.pass?e(new Error("两次输入密码不一致!")):e()},trigger:"blur"}],age:[{validator:function(s,t,a){if(!t)return a(new Error("年龄不能为空"));setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("必须年满18岁")):a():a(new Error("请输入数字值"))},1e3)},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){if(!s)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var t=this.dynamicValidateForm.domains.indexOf(s);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({value:"",key:Date.now()})}}},r=(a(427),a(0)),l=Object(r.a)(e,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:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n 立即创建\n 取消\n \n\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",attrs:{slot:"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.$set(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.$set(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.$set(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.$set(s.form,"date2",t)},expression:"form.date2"}})],1)],1),a("el-form-item",{attrs:{label:"即时配送"}},[a("el-switch",{model:{value:s.form.delivery,callback:function(t){s.$set(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.$set(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.$set(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.$set(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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"80px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动名称"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.name"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动区域"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.region"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"区域一"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"区域二"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动时间"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择日期"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.date1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择时间"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.date2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"即时配送"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.delivery"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动性质"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.type"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"美食/餐厅线上活动"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地推活动"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"线下主题活动"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"单纯品牌曝光"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"特殊资源"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.resource"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"线上品牌商赞助"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"线下场地免费"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动形式"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.desc"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("立即创建"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("取消"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("form")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("p",[s._v("当垂直方向空间受限且表单较简单时，可以在一行内放置表单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n 查询\n \n\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",attrs:{slot:"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.$set(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.$set(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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":inline")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formInline"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-form-inline"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"审批人"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formInline.user"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"审批人"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动区域"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formInline.region"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动区域"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"区域一"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"区域二"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("查询"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("formInline")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("user")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("根据具体目标和制约因素，选择最佳的标签对齐方式。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n 左对齐\n 右对齐\n 顶部对齐\n\n
    \n\n \n \n \n \n \n \n \n \n \n\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",attrs:{slot:"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.$set(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.$set(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.$set(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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"labelPosition"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("左对齐"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("右对齐"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("顶部对齐"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin: 20px;"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label-position")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"labelPosition"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"80px"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formLabelAlign"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"名称"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.name"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动区域"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.region"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动形式"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.type"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("labelPosition")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'right'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("formLabelAlign")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n 立即创建\n 重置\n \n\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",attrs:{slot:"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.$set(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.$set(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.$set(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.$set(s.ruleForm,"date2",t)},expression:"ruleForm.date2"}})],1)],1)],1),a("el-form-item",{attrs:{label:"即时配送",prop:"delivery"}},[a("el-switch",{model:{value:s.ruleForm.delivery,callback:function(t){s.$set(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.$set(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.$set(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.$set(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("rules")]),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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"rules"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100px"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动名称"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.name"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动区域"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"region"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.region"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"区域一"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"区域二"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动时间"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择日期"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.date1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择时间"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.date2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"即时配送"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"delivery"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.delivery"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动性质"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.type"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"美食/餐厅线上活动"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地推活动"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"线下主题活动"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"单纯品牌曝光"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"特殊资源"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"resource"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.resource"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"线上品牌商赞助"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"线下场地免费"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动形式"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"desc"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm.desc"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"submitForm('ruleForm')\"")]),s._v(">")]),s._v("立即创建"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"resetForm('ruleForm')\"")]),s._v(">")]),s._v("重置"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ruleForm")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": [\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'请输入活动名称'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" },\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'长度在 3 到 5 个字符'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": [\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'请选择活动区域'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": [\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'请选择日期'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": [\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'请选择时间'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'array'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'请至少选择一个活动性质'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": [\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'请选择活动资源'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": [\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'请填写活动形式'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ]\n }\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n 提交\n 重置\n \n\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",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,"status-icon":"",rules:s.rules2,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"密码",prop:"pass"}},[a("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:s.ruleForm2.pass,callback:function(t){s.$set(s.ruleForm2,"pass",t)},expression:"ruleForm2.pass"}})],1),a("el-form-item",{attrs:{label:"确认密码",prop:"checkPass"}},[a("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:s.ruleForm2.checkPass,callback:function(t){s.$set(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.$set(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("code",[s._v("status-icon")]),s._v("属性为输入框添加了表示校验结果的反馈图标。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status-icon")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"rules2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100px"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"密码"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"pass"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"password"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm2.pass"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("autocomplete")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"确认密码"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkPass"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"password"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm2.checkPass"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("autocomplete")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"年龄"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model.number")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"ruleForm2.age"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"submitForm('ruleForm2')\"")]),s._v(">")]),s._v("提交"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"resetForm('ruleForm2')\"")]),s._v(">")]),s._v("重置"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" checkAge = "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!value) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" callback("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'年龄不能为空'")]),s._v("));\n }\n setTimeout("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v(".isInteger(value)) {\n callback("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'请输入数字值'")]),s._v("));\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value < "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18")]),s._v(") {\n callback("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'必须年满18岁'")]),s._v("));\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n callback();\n }\n }\n }, "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(");\n };\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" validatePass = "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value === "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n callback("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'请输入密码'")]),s._v("));\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'checkPass'")]),s._v(");\n }\n callback();\n }\n };\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" validatePass2 = "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value === "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n callback("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'请再次输入密码'")]),s._v("));\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value !== "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".ruleForm2.pass) {\n callback("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'两次输入密码不一致!'")]),s._v("));\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n callback();\n }\n };\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ruleForm2")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pass")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkPass")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("rules2")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pass")]),s._v(": [\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": validatePass, "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkPass")]),s._v(": [\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": validatePass2, "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": [\n { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": checkAge, "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ]\n }\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n 删除\n \n \n 提交\n 新增域名\n 重置\n \n\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",attrs:{slot:"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.$set(s.dynamicValidateForm,"email",t)},expression:"dynamicValidateForm.email"}})],1),s._l(s.dynamicValidateForm.domains,function(t,e){return a("el-form-item",{key:t.key,attrs:{label:"域名"+e,prop:"domains."+e+".value",rules:{required:!0,message:"域名不能为空",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(a){s.$set(t,"value",a)},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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100px"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-dynamic"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"email"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"邮箱"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{pre:!0,attrs:{class:"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",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm.email"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"(domain, index) in dynamicValidateForm.domains"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"'域名' + index\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"domain.key"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"'domains.' + index + '.value'\"")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{\n required: true, message: '域名不能为空', trigger: 'blur'\n }\"")]),s._v("\n >")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"domain.value"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click.prevent")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"removeDomain(domain)"')]),s._v(">")]),s._v("删除"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"submitForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("提交"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"addDomain"')]),s._v(">")]),s._v("新增域名"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"resetForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("重置"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dynamicValidateForm")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("domains")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n },\n removeDomain(item) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" index = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.indexOf(item)\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (index !== "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(") {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.splice(index, "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(")\n }\n },\n addDomain() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.push({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v(".now()\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n 提交\n 重置\n \n\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",attrs:{slot:"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",autocomplete:"off"},model:{value:s.numberValidateForm.age,callback:function(t){s.$set(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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100px"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"年龄"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"[\n { required: true, message: '年龄不能为空'},\n { type: 'number', message: '年龄必须为数字值'}\n ]\"")]),s._v("\n >")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model.number")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"numberValidateForm.age"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("autocomplete")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"submitForm('numberValidateForm')\"")]),s._v(">")]),s._v("提交"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"resetForm('numberValidateForm')\"")]),s._v(">")]),s._v("重置"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("numberValidateForm")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n 立即创建\n 取消\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n sizeForm: {\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",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.sizeForm,"label-width":"80px",size:"mini"}},[a("el-form-item",{attrs:{label:"活动名称"}},[a("el-input",{model:{value:s.sizeForm.name,callback:function(t){s.$set(s.sizeForm,"name",t)},expression:"sizeForm.name"}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:s.sizeForm.region,callback:function(t){s.$set(s.sizeForm,"region",t)},expression:"sizeForm.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.sizeForm.date1,callback:function(t){s.$set(s.sizeForm,"date1",t)},expression:"sizeForm.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.sizeForm.date2,callback:function(t){s.$set(s.sizeForm,"date2",t)},expression:"sizeForm.date2"}})],1)],1),a("el-form-item",{attrs:{label:"活动性质"}},[a("el-checkbox-group",{model:{value:s.sizeForm.type,callback:function(t){s.$set(s.sizeForm,"type",t)},expression:"sizeForm.type"}},[a("el-checkbox-button",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),a("el-checkbox-button",{attrs:{label:"地推活动",name:"type"}}),a("el-checkbox-button",{attrs:{label:"线下主题活动",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"特殊资源"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:s.sizeForm.resource,callback:function(t){s.$set(s.sizeForm,"resource",t)},expression:"sizeForm.resource"}},[a("el-radio",{attrs:{border:"",label:"线上品牌商赞助"}}),a("el-radio",{attrs:{border:"",label:"线下场地免费"}})],1)],1),a("el-form-item",{attrs:{size:"large"}},[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 上的"),a("code",[s._v("size")]),s._v("属性，直接为这个表单项或表单组件设置自己的"),a("code",[s._v("size")]),s._v("即可。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizeForm"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"80px"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动名称"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizeForm.name"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动区域"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizeForm.region"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"区域一"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"区域二"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动时间"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择日期"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizeForm.date1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择时间"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizeForm.date2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动性质"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizeForm.type"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"美食/餐厅线上活动"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地推活动"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"线下主题活动"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"特殊资源"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"sizeForm.resource"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"线上品牌商赞助"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"线下场地免费"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"large"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("立即创建"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("取消"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sizeForm")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),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)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"form-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form 表单")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dian-xing-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-xing-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 典型表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("W3C 标准中有如下"),a("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[s._v("规定")]),s._v("：")]),a("blockquote",[a("p",[a("i",[s._v("When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.")])])]),a("p",[s._v("即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 "),a("code",{pre:!0},[s._v("")]),s._v(" 标签上添加 "),a("code",{pre:!0},[s._v("@submit.native.prevent")]),s._v("。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"xing-nei-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xing-nei-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 行内表单")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 对齐方式")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"biao-dan-yan-zheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-yan-zheng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表单验证")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi-xiao-yan-gui-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-xiao-yan-gui-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义校验规则")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dong-tai-zeng-jian-biao-dan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-dan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态增减表单项")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shu-zi-lei-xing-yan-zheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-zi-lei-xing-yan-zheng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 数字类型验证")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("嵌套在 "),a("code",{pre:!0},[s._v("el-form-item")]),s._v(" 中的 "),a("code",{pre:!0},[s._v("el-form-item")]),s._v(" 标签宽度默认为零，不会继承 "),a("code",{pre:!0},[s._v("el-form")]),s._v(" 的 "),a("code",{pre:!0},[s._v("label-width")]),s._v("。如果需要可以为其单独设置 "),a("code",{pre:!0},[s._v("label-width")]),s._v(" 属性。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"biao-dan-nei-zu-jian-chi-cun-kong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-nei-zu-jian-chi-cun-kong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表单内组件尺寸控制")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("通过设置 Form 上的 "),t("code",{pre:!0},[this._v("size")]),this._v(" 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"form-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("表单域标签的位置，如果值为 left 或者 right 时，则需要设置 "),a("code",{pre:!0},[s._v("label-width")])]),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 直接子元素的 form-item 会继承该值")]),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("hide-required-asterisk")]),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-message")]),a("td",[s._v("是否显示校验错误信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("inline-message")]),a("td",[s._v("是否以行内形式展示校验信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status-icon")]),a("td",[s._v("是否在输入框中显示校验结果反馈图标")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("validate-on-rule-change")]),a("td",[s._v("是否在 "),a("code",{pre:!0},[s._v("rules")]),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("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"form-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[this._v("¶")]),this._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("对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise")]),a("td",[s._v("Function(callback: Function(boolean, object))")])]),a("tr",[a("td",[s._v("validateField")]),a("td",[s._v("对部分表单字段进行校验的方法")]),a("td",[s._v("Function(props: array")])]),a("tr",[a("td",[s._v("resetFields")]),a("td",[s._v("对整个表单进行重置，将所有字段值重置为初始值并移除校验结果")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearValidate")]),a("td",[s._v("移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果")]),a("td",[s._v("Function(props: array")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"form-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Events")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("validate")]),t("td",[this._v("任一表单项被校验后触发")]),t("td",[this._v("被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"form-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的")]),a("td",[s._v("string")]),a("td",[s._v("传入 Form 组件的 "),a("code",{pre:!0},[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("boolean")]),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",{pre:!0},[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")])]),a("tr",[a("td",[s._v("inline-message")]),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("medium / small / mini")]),a("td",[s._v("-")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Form Item 的内容")])]),t("tr",[t("td",[this._v("label")]),t("td",[this._v("标签文本的内容")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"form-item-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Scoped Slot")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("error")]),t("td",[this._v("自定义表单校验信息的显示方式，参数为 { error }")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"form-item-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item 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("resetField")]),a("td",[s._v("对该表单项进行重置，将其值重置为初始值并移除校验结果")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("clearValidate")]),a("td",[s._v("移除该表单项的校验结果")]),a("td",[s._v("-")])])])])}],!1,null,null,null);l.options.__file="form.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}},r=(a(424),a(425),a(426),a(0)),l=Object(r.a)(e,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:'\n \n 下拉菜单\n \n \n 黄金糕\n 狮子头\n 螺蛳粉\n 双皮奶\n 蚵仔煎\n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n 下拉菜单"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n 下拉菜单"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("双皮奶"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("蚵仔煎"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可使用按钮触发下拉菜单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n 更多菜单\n \n \n 黄金糕\n 狮子头\n 螺蛳粉\n 双皮奶\n 蚵仔煎\n \n\n\n 更多菜单\n \n 黄金糕\n 狮子头\n 螺蛳粉\n 双皮奶\n 蚵仔煎\n \n\n\n\n\n\n\n',script:"\n export default {\n methods: {\n handleClick() {\n alert('button click');\n }\n }\n }\n",style:"\n .el-dropdown {\n vertical-align: top;\n }\n .el-dropdown + .el-dropdown {\n margin-left: 15px;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n 更多菜单"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},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",{attrs:{slot:"dropdown"},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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n 更多菜单"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n 更多菜单\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("vertical-align")]),s._v(": top;\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" + "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("15px")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick() {\n alert("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'button click'")]),s._v(");\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n")])])])]),s._m(3),a("p",[s._v("可以配置 click 激活或者 hover 激活。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n hover 激活\n \n \n 下拉菜单\n \n \n 黄金糕\n 狮子头\n 螺蛳粉\n 双皮奶\n 蚵仔煎\n \n \n \n \n click 激活\n \n \n 下拉菜单\n \n \n 黄金糕\n 狮子头\n 螺蛳粉\n 双皮奶\n 蚵仔煎\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},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-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("hover 激活"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n 下拉菜单"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("click 激活"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n 下拉菜单"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n 下拉菜单\n \n \n 黄金糕\n 狮子头\n 螺蛳粉\n 双皮奶\n 蚵仔煎\n \n\n\n\n',script:null,style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"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-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":hide-on-click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n 下拉菜单"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("双皮奶"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("蚵仔煎"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n 下拉菜单\n \n \n 黄金糕\n 狮子头\n 螺蛳粉\n 双皮奶\n 蚵仔煎\n \n\n\n\n\n\n',script:"\n export default {\n methods: {\n handleCommand(command) {\n this.$message('click on item ' + command);\n }\n }\n }\n",style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",{on:{command:s.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n 下拉菜单"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@command")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n 下拉菜单"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"a"')]),s._v(">")]),s._v("黄金糕"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"b"')]),s._v(">")]),s._v("狮子头"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"c"')]),s._v(">")]),s._v("螺蛳粉"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"d"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("双皮奶"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"e"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("蚵仔煎"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleCommand(command) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'click on item '")]),s._v(" + command);\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n 默认尺寸\n \n 黄金糕\n 狮子头\n 螺蛳粉\n 双皮奶\n 蚵仔煎\n \n\n\n\n 中等尺寸\n \n 黄金糕\n 狮子头\n 螺蛳粉\n 双皮奶\n 蚵仔煎\n \n\n\n\n 小型尺寸\n \n 黄金糕\n 狮子头\n 螺蛳粉\n 双皮奶\n 蚵仔煎\n \n\n\n\n 超小尺寸\n \n 黄金糕\n 狮子头\n 螺蛳粉\n 双皮奶\n 蚵仔煎\n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[s._v("\n 默认尺寸\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},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:{size:"medium","split-button":"",type:"primary"}},[s._v("\n 中等尺寸\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},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:{size:"small","split-button":"",type:"primary"}},[s._v("\n 小型尺寸\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},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:{size:"mini","split-button":"",type:"primary"}},[s._v("\n 超小尺寸\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},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("medium")]),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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n 默认尺寸\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n 中等尺寸\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n 小型尺寸\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n 超小尺寸\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[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)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"dropdown-xia-la-cai-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-xia-la-cai-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown 下拉菜单")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"hong-fa-dui-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-dui-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 触发对象")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"hong-fa-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 触发方式")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"cai-dan-yin-cang-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cai-dan-yin-cang-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 菜单隐藏方式")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("可以"),t("code",{pre:!0},[this._v("hide-on-click")]),this._v("属性来配置。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zhi-ling-shi-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-ling-shi-jian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 指令事件")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dropdown-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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",{pre:!0},[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("菜单尺寸，在"),a("code",{pre:!0},[s._v("split-button")]),s._v("为 true 的情况下也对触发按钮生效")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),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("placement")]),a("td",[s._v("菜单弹出位置")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),a("td",[s._v("bottom-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")])]),a("tr",[a("td",[s._v("show-timeout")]),a("td",[s._v("展开下拉菜单的延时（仅在 trigger 为 hover 时有效）")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("250")])]),a("tr",[a("td",[s._v("hide-timeout")]),a("td",[s._v("收起下拉菜单的延时（仅在 trigger 为 hover 时有效）")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("150")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){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("tr",[a("td",[s._v("dropdown")]),a("td",[s._v("下拉列表，通常是 "),a("code",{pre:!0},[s._v("")]),s._v(" 组件")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dropdown-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[this._v("¶")]),this._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",{pre:!0},[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 的指令")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("下拉框出现/隐藏时触发")]),a("td",[s._v("出现则为 true，隐藏则为 false")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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/number/object")]),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")])])])])}],!1,null,null,null);l.options.__file="dropdown.md";t.default=l.exports},,function(s,t,a){"use strict";a.r(t);var e={data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"})}}},r=(a(417),a(0)),l=Object(r.a)(e,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),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Header\n Main\n\n\n\n Header\n Main\n Footer\n\n\n\n Aside\n Main\n\n\n\n Header\n \n Aside\n Main\n \n\n\n\n Header\n \n Aside\n \n Main\n Footer\n \n \n\n\n\n Aside\n \n Header\n Main\n \n\n\n\n Aside\n \n Header\n Main\n Footer\n \n\n\n\n',script:null,style:"\n .el-header, .el-footer {\n background-color: #B3C0D1;\n color: #333;\n text-align: center;\n line-height: 60px;\n }\n \n .el-aside {\n background-color: #D3DCE6;\n color: #333;\n text-align: center;\n line-height: 200px;\n }\n \n .el-main {\n background-color: #E9EEF3;\n color: #333;\n text-align: center;\n line-height: 160px;\n }\n \n body > .el-container {\n margin-bottom: 40px;\n }\n \n .el-container:nth-child(5) .el-aside,\n .el-container:nth-child(6) .el-aside {\n line-height: 260px;\n }\n \n .el-container:nth-child(7) .el-aside {\n line-height: 320px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-container",[a("el-header",[s._v("Header")]),a("el-main",[s._v("Main")])],1),a("el-container",[a("el-header",[s._v("Header")]),a("el-main",[s._v("Main")]),a("el-footer",[s._v("Footer")])],1),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-main",[s._v("Main")])],1),a("el-container",[a("el-header",[s._v("Header")]),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-main",[s._v("Main")])],1)],1),a("el-container",[a("el-header",[s._v("Header")]),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-container",[a("el-main",[s._v("Main")]),a("el-footer",[s._v("Footer")])],1)],1)],1),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-container",[a("el-header",[s._v("Header")]),a("el-main",[s._v("Main")])],1)],1),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-container",[a("el-header",[s._v("Header")]),a("el-main",[s._v("Main")]),a("el-footer",[s._v("Footer")])],1)],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Footer"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Footer"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Footer"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-header")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-footer")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#B3C0D1")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("60px")]),s._v(";\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#D3DCE6")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-main")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#E9EEF3")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("160px")]),s._v(";\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("body")]),s._v(" > "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),a("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(5)")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),a("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(6)")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("260px")]),s._v(";\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),a("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(7)")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("320px")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n 选项1\n 选项2\n \n \n 选项3\n \n \n \n 选项4-1\n \n \n \n \n \n \n 选项1\n 选项2\n \n \n 选项3\n \n \n \n 选项4-1\n \n \n \n \n \n \n 选项1\n 选项2\n \n \n 选项3\n \n \n \n 选项4-1\n \n \n \n \n \n \n \n \n \n \n 查看\n 新增\n 删除\n \n \n 王小虎\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\n\n\n',script:"\n export default {\n data() {\n const item = {\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n };\n return {\n tableData: Array(20).fill(item)\n }\n }\n };\n",style:"\n .el-header {\n background-color: #B3C0D1;\n color: #333;\n line-height: 60px;\n }\n \n .el-aside {\n color: #333;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[a("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[a("el-menu",{attrs:{"default-openeds":["1","3"]}},[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("选项4-1")])],2)],2),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-menu"}),s._v("导航二")]),a("el-menu-item-group",[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")])],2),a("el-menu-item-group",{attrs:{title:"分组2"}},[a("el-menu-item",{attrs:{index:"2-3"}},[s._v("选项3")])],1),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("选项4-1")])],2)],2),a("el-submenu",{attrs:{index:"3"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-setting"}),s._v("导航三")]),a("el-menu-item-group",[a("template",{slot:"title"},[s._v("分组一")]),a("el-menu-item",{attrs:{index:"3-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"3-2"}},[s._v("选项2")])],2),a("el-menu-item-group",{attrs:{title:"分组2"}},[a("el-menu-item",{attrs:{index:"3-3"}},[s._v("选项3")])],1),a("el-submenu",{attrs:{index:"3-4"}},[a("template",{slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"3-4-1"}},[s._v("选项4-1")])],2)],2)],1)],1),a("el-container",[a("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[a("el-dropdown",[a("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("查看")]),a("el-dropdown-item",[s._v("新增")]),a("el-dropdown-item",[s._v("删除")])],1)],1),a("span",[s._v("王小虎")])],1),a("el-main",[a("el-table",{attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"140"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)],1)],1)],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"height: 500px; border: 1px solid #eee"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"background-color: rgb(238, 241, 246)"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-openeds")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['1', '3']\"")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("导航一"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("分组一"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("选项2"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"分组2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("选项3"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("选项4-1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("导航二"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("分组一"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("选项2"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"分组2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("选项3"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2-4-1"')]),s._v(">")]),s._v("选项4-1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("导航三"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("分组一"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3-1"')]),s._v(">")]),s._v("选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3-2"')]),s._v(">")]),s._v("选项2"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"分组2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3-3"')]),s._v(">")]),s._v("选项3"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3-4"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3-4-1"')]),s._v(">")]),s._v("选项4-1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n \n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text-align: right; font-size: 12px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-right: 15px"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("查看"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("新增"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("删除"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("王小虎"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n \n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"140"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-header")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#B3C0D1")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("60px")]),s._v(";\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" item = {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n };\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Array")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20")]),s._v(").fill(item)\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),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)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"container-bu-ju-rong-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-bu-ju-rong-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container 布局容器")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[t("code",{pre:!0},[this._v("")]),this._v("：外层容器。当子元素中包含 "),t("code",{pre:!0},[this._v("")]),this._v(" 或 "),t("code",{pre:!0},[this._v("")]),this._v(" 时，全部子元素会垂直上下排列，否则会水平左右排列。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[t("code",{pre:!0},[this._v("")]),this._v("：顶栏容器。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[t("code",{pre:!0},[this._v("")]),this._v("：侧边栏容器。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[t("code",{pre:!0},[this._v("")]),this._v("：主要区域容器。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[t("code",{pre:!0},[this._v("")]),this._v("：底栏容器。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("div",{staticClass:"tip"},[t("p",[this._v("以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，"),t("code",{pre:!0},[this._v("")]),this._v(" 的子元素只能是后四者，后四者的父元素也只能是 "),t("code",{pre:!0},[this._v("")]),this._v("。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"chang-jian-ye-mian-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-ye-mian-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 常见页面布局")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li","aria-hidden":"true"}},[this._v("¶")]),this._v(" 实例")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"container-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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("direction")]),a("td",[s._v("子元素的排列方向")]),a("td",[s._v("string")]),a("td",[s._v("horizontal / vertical")]),a("td",[s._v("子元素中有 "),a("code",{pre:!0},[s._v("el-header")]),s._v(" 或 "),a("code",{pre:!0},[s._v("el-footer")]),s._v(" 时为 vertical，否则为 horizontal")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"header-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#header-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Header Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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("60px")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"aside-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#aside-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Aside Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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("width")]),a("td",[s._v("侧边栏宽度")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("300px")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"footer-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#footer-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Footer Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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("60px")])])])])}],!1,null,null,null);l.options.__file="container.md";t.default=l.exports},,function(s,t,a){"use strict";a.r(t);var e={data:function(){return{color1:"#409EFF",color2:null,color3:"rgba(19, 206, 102, 0.8)",color4:"#409EFF",color5:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}},mounted:function(){this.$nextTick(function(){document.querySelectorAll(".source")[0].style.padding="0"})}},r=(a(415),a(0)),l=Object(r.a)(e,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:'
    \n 有默认值\n \n
    \n
    \n 无默认值\n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n color1: '#409EFF',\n color2: null\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("有默认值"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color1"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("无默认值"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color2"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#409EFF'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-alpha")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n color5: 'rgba(255, 69, 0, 0.68)',\n predefineColors: [\n '#ff4500',\n '#ff8c00',\n '#ffd700',\n '#90ee90',\n '#00ced1',\n '#1e90ff',\n '#c71585',\n 'rgba(255, 69, 0, 0.68)',\n 'rgb(255, 120, 0)',\n 'hsv(51, 100, 98)',\n 'hsva(120, 40, 94, 0.5)',\n 'hsl(181, 100%, 37%)',\n 'hsla(209, 100%, 56%, 0.73)',\n '#c7158577'\n ]\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-color-picker",{attrs:{"show-alpha":"",predefine:s.predefineColors},model:{value:s.color5,callback:function(t){s.color5=t},expression:"color5"}})],1),a("p",[s._v("ColorPicker 支持预定义颜色")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color5"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-alpha")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":predefine")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"predefineColors"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color5")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rgba(255, 69, 0, 0.68)'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("predefineColors")]),s._v(": [\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#ff4500'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#ff8c00'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#ffd700'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#90ee90'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#00ced1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#1e90ff'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#c71585'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rgba(255, 69, 0, 0.68)'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rgb(255, 120, 0)'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'hsv(51, 100, 98)'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'hsva(120, 40, 94, 0.5)'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'hsl(181, 100%, 37%)'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'hsla(209, 100%, 56%, 0.73)'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#c7158577'")]),s._v("\n ]\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n color4: '#409EFF'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-color-picker",{model:{value:s.color4,callback:function(t){s.color4=t},expression:"color4"}}),a("el-color-picker",{attrs:{size:"medium"},model:{value:s.color4,callback:function(t){s.color4=t},expression:"color4"}}),a("el-color-picker",{attrs:{size:"small"},model:{value:s.color4,callback:function(t){s.color4=t},expression:"color4"}}),a("el-color-picker",{attrs:{size:"mini"},model:{value:s.color4,callback:function(t){s.color4=t},expression:"color4"}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color4")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#409EFF'")]),s._v("\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"colorpicker-yan-se-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker-yan-se-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker 颜色选择器")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"xuan-ze-tou-ming-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-tou-ming-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择透明度")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"yu-ding-yi-yan-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yu-ding-yi-yan-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 预定义颜色")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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 / v-model")]),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("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("medium / small / mini")])]),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）")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("ColorPicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("predefine")]),a("td",[s._v("预定义颜色")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._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-change")]),a("td",[s._v("面板中当前显示的颜色发生改变时触发")]),a("td",[s._v("当前显示的颜色值")])])])])}],!1,null,null,null);l.options.__file="color-picker.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}},r=(a(414),a(0)),l=Object(r.a)(e,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:'\n \n
    与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
    \n
    在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
    \n     \n \n
    控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
    \n
    页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
    \n     \n \n
    简化流程：设计简洁直观的操作流程；
    \n
    清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
    \n
    帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
    \n     \n \n
    用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
    \n
    结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
    \n     \n    \n\n',script:"\n export default {\n data() {\n return {\n activeNames: ['1']\n };\n },\n methods: {\n handleChange(val) {\n console.log(val);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"activeNames"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"一致性 Consistency"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"反馈 Feedback"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"效率 Efficiency"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("简化流程：设计简洁直观的操作流程；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"可控 Controllability"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("activeNames")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("]\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(val) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(val);\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("每次只能展开一个面板")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
    \n
    在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
    \n     \n \n
    控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
    \n
    页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
    \n     \n \n
    简化流程：设计简洁直观的操作流程；
    \n
    清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
    \n
    帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
    \n     \n \n
    用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
    \n
    结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
    \n     \n    \n\n',script:"\n export default {\n data() {\n return {\n activeName: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"activeName"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"一致性 Consistency"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"反馈 Feedback"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"效率 Efficiency"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("简化流程：设计简洁直观的操作流程；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"可控 Controllability"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("activeName")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n
    与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
    \n
    在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
    \n     \n \n
    控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
    \n
    页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
    \n     \n \n
    简化流程：设计简洁直观的操作流程；
    \n
    清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
    \n
    帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
    \n     \n \n
    用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
    \n
    结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
    \n     \n    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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-info"})]),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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n 一致性 Consistency"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"header-icon el-icon-info"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"反馈 Feedback"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"效率 Efficiency"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("简化流程：设计简洁直观的操作流程；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"可控 Controllability"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"collapse-zhe-die-mian-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhe-die-mian-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse 折叠面板")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shou-feng-qin-xiao-guo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-xiao-guo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手风琴效果")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi-mian-ban-biao-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mian-ban-biao-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义面板标题")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("除了可以通过 "),t("code",{pre:!0},[this._v("title")]),this._v(" 属性以外，还可以通过具名 "),t("code",{pre:!0},[this._v("slot")]),this._v(" 来实现自定义面板的标题内容，以实现增加图标等效果。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"collapse-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("value / v-model")]),a("td",[s._v("当前激活的面板(如果是手风琴模式，绑定值类型需要为"),a("code",{pre:!0},[s._v("string")]),s._v("，否则为"),a("code",{pre:!0},[s._v("array")]),s._v(")")]),a("td",[s._v("string / array")]),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")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"collapse-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[this._v("¶")]),this._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",{pre:!0},[s._v("activeNames")]),s._v(" 类型为"),a("code",{pre:!0},[s._v("string")]),s._v("，否则为"),a("code",{pre:!0},[s._v("array")]),s._v(")")]),a("td",[s._v("(activeNames: array / string)")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"collapse-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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("—")])])])])}],!1,null,null,null);l.options.__file="collapse.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={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)}}},r=(a(412),a(0)),l=Object(r.a)(e,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:'
    \n 默认 click 触发子菜单\n \n \n
    \n
    \n hover 触发子菜单\n \n \n
    \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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("默认 click 触发子菜单"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"selectedOptions"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("hover 触发子菜单"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("expand-trigger")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"selectedOptions2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zhinan'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'指南'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'shejiyuanze'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'设计原则'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yizhi'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一致'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'fankui'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'反馈'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'xiaolv'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'效率'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'kekong'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'可控'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'daohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'导航'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cexiangdaohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'侧向导航'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dingbudaohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'顶部导航'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zujian'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'组件'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Layout 布局'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Color 色彩'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Typography 字体'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Icon 图标'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Button 按钮'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Radio 单选框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Checkbox 多选框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Input 输入框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'InputNumber 计数器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Select 选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cascader 级联选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Switch 开关'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Slider 滑块'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'TimePicker 时间选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DatePicker 日期选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Upload 上传'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Rate 评分'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form 表单'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Table 表格'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag 标签'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Progress 进度条'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tree 树形控件'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Pagination 分页'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Badge 标记'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Alert 警告'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading 加载'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message 消息提示'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'MessageBox 弹框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notification 通知'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'NavMenu 导航菜单'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tabs 标签页'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Breadcrumb 面包屑'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dropdown 下拉菜单'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Steps 步骤条'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dialog 对话框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tooltip 文字提示'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Popover 弹出框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Card 卡片'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Carousel 走马灯'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Collapse 折叠面板'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ziyuan'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'资源'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'jiaohu'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'组件交互文档'")]),s._v("\n }]\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("selectedOptions")]),s._v(": [],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("selectedOptions2")]),s._v(": []\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value);\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"optionsWithDisabled"')]),s._v("\n>")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("optionsWithDisabled")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zhinan'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'指南'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'shejiyuanze'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'设计原则'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yizhi'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一致'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'fankui'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'反馈'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'xiaolv'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'效率'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'kekong'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'可控'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'daohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'导航'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cexiangdaohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'侧向导航'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dingbudaohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'顶部导航'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zujian'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'组件'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Layout 布局'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Color 色彩'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Typography 字体'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Icon 图标'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Button 按钮'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Radio 单选框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Checkbox 多选框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Input 输入框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'InputNumber 计数器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Select 选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cascader 级联选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Switch 开关'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Slider 滑块'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'TimePicker 时间选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DatePicker 日期选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Upload 上传'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Rate 评分'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form 表单'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Table 表格'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag 标签'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Progress 进度条'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tree 树形控件'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Pagination 分页'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Badge 标记'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Alert 警告'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading 加载'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message 消息提示'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'MessageBox 弹框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notification 通知'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'NavMenu 导航菜单'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tabs 标签页'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Breadcrumb 面包屑'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dropdown 下拉菜单'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Steps 步骤条'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dialog 对话框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tooltip 文字提示'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Popover 弹出框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Card 卡片'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Carousel 走马灯'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Collapse 折叠面板'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ziyuan'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'资源'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'jiaohu'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'组件交互文档'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":show-all-levels")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n>")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zhinan'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'指南'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'shejiyuanze'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'设计原则'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yizhi'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一致'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'fankui'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'反馈'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'xiaolv'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'效率'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'kekong'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'可控'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'daohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'导航'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cexiangdaohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'侧向导航'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dingbudaohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'顶部导航'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zujian'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'组件'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Layout 布局'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Color 色彩'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Typography 字体'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Icon 图标'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Button 按钮'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Radio 单选框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Checkbox 多选框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Input 输入框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'InputNumber 计数器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Select 选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cascader 级联选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Switch 开关'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Slider 滑块'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'TimePicker 时间选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DatePicker 日期选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Upload 上传'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Rate 评分'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form 表单'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Table 表格'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag 标签'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Progress 进度条'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tree 树形控件'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Pagination 分页'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Badge 标记'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Alert 警告'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading 加载'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message 消息提示'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'MessageBox 弹框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notification 通知'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'NavMenu 导航菜单'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tabs 标签页'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Breadcrumb 面包屑'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dropdown 下拉菜单'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Steps 步骤条'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dialog 对话框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tooltip 文字提示'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Popover 弹出框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Card 卡片'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Carousel 走马灯'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Collapse 折叠面板'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ziyuan'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'资源'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'jiaohu'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'组件交互文档'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"selectedOptions3"')]),s._v("\n>")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zhinan'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'指南'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'shejiyuanze'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'设计原则'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yizhi'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一致'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'fankui'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'反馈'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'xiaolv'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'效率'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'kekong'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'可控'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'daohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'导航'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cexiangdaohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'侧向导航'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dingbudaohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'顶部导航'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zujian'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'组件'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Layout 布局'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Color 色彩'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Typography 字体'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Icon 图标'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Button 按钮'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Radio 单选框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Checkbox 多选框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Input 输入框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'InputNumber 计数器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Select 选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cascader 级联选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Switch 开关'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Slider 滑块'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'TimePicker 时间选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DatePicker 日期选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Upload 上传'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Rate 评分'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form 表单'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Table 表格'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag 标签'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Progress 进度条'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tree 树形控件'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Pagination 分页'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Badge 标记'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Alert 警告'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading 加载'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message 消息提示'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'MessageBox 弹框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notification 通知'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'NavMenu 导航菜单'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tabs 标签页'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Breadcrumb 面包屑'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dropdown 下拉菜单'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Steps 步骤条'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dialog 对话框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tooltip 文字提示'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Popover 弹出框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Card 卡片'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Carousel 走马灯'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Collapse 折叠面板'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ziyuan'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'资源'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'jiaohu'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'组件交互文档'")]),s._v("\n }]\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("selectedOptions3")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zujian'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v("]\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("change-on-select")]),s._v("\n>")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zhinan'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'指南'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'shejiyuanze'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'设计原则'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yizhi'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一致'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'fankui'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'反馈'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'xiaolv'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'效率'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'kekong'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'可控'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'daohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'导航'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cexiangdaohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'侧向导航'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dingbudaohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'顶部导航'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zujian'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'组件'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Layout 布局'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Color 色彩'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Typography 字体'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Icon 图标'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Button 按钮'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Radio 单选框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Checkbox 多选框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Input 输入框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'InputNumber 计数器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Select 选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cascader 级联选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Switch 开关'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Slider 滑块'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'TimePicker 时间选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DatePicker 日期选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Upload 上传'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Rate 评分'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form 表单'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Table 表格'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag 标签'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Progress 进度条'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tree 树形控件'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Pagination 分页'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Badge 标记'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Alert 警告'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading 加载'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message 消息提示'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'MessageBox 弹框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notification 通知'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'NavMenu 导航菜单'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tabs 标签页'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Breadcrumb 面包屑'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dropdown 下拉菜单'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Steps 步骤条'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dialog 对话框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tooltip 文字提示'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Popover 弹出框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Card 卡片'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Carousel 走马灯'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Collapse 折叠面板'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ziyuan'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'资源'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'jiaohu'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'组件交互文档'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("当选中某一级时，动态加载该级下的选项。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@active-item-change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleItemChange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v("\n>")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options2")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'江苏'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": []\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'浙江'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": []\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cities'")]),s._v("\n }\n };\n },\n\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleItemChange(val) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'active item:'")]),s._v(", val);\n setTimeout("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (val.indexOf("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'江苏'")]),s._v(") > "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(" && !"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].cities.length) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].cities = [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'南京'")]),s._v("\n }];\n } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (val.indexOf("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'浙江'")]),s._v(") > "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(" && !"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("].cities.length) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("].cities = [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'杭州'")]),s._v("\n }];\n }\n }, "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300")]),s._v(");\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("可以快捷地搜索选项并选择。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n 只可选择最后一级菜单的选项\n \n
    \n
    \n 可选择任意一级菜单的选项\n \n
    \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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("只可选择最后一级菜单的选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"试试搜索：指南"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n >")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("可选择任意一级菜单的选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"试试搜索：指南"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("change-on-select")]),s._v("\n >")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zhinan'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'指南'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'shejiyuanze'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'设计原则'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'yizhi'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一致'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'fankui'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'反馈'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'xiaolv'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'效率'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'kekong'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'可控'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'daohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'导航'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cexiangdaohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'侧向导航'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dingbudaohang'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'顶部导航'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zujian'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'组件'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Layout 布局'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Color 色彩'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Typography 字体'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Icon 图标'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Button 按钮'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Radio 单选框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Checkbox 多选框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Input 输入框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'InputNumber 计数器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Select 选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Cascader 级联选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Switch 开关'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Slider 滑块'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'TimePicker 时间选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DatePicker 日期选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Upload 上传'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Rate 评分'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Form 表单'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Table 表格'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tag 标签'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Progress 进度条'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tree 树形控件'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Pagination 分页'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Badge 标记'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Alert 警告'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Loading 加载'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Message 消息提示'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'MessageBox 弹框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Notification 通知'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'NavMenu 导航菜单'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tabs 标签页'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Breadcrumb 面包屑'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dropdown 下拉菜单'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Steps 步骤条'")]),s._v("\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Dialog 对话框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Tooltip 文字提示'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Popover 弹出框'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Card 卡片'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Carousel 走马灯'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Collapse 折叠面板'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'ziyuan'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'资源'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'jiaohu'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'组件交互文档'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"cascader-ji-lian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-ji-lian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader 级联选择器")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jin-yong-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用选项")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("通过在数据源中设置 "),t("code",{pre:!0},[this._v("disabled")]),this._v(" 字段来声明该选项是禁用的")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jin-xian-shi-zui-hou-yi-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-xian-shi-zui-hou-yi-ji","aria-hidden":"true"}},[this._v("¶")]),this._v(" 仅显示最后一级")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"mo-ren-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认值")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"xuan-ze-ji-gai-bian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ji-gai-bian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择即改变")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dong-tai-jia-zai-ci-ji-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-jia-zai-ci-ji-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态加载次级选项")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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 / v-model")]),a("td",[s._v("绑定值")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("options")]),a("td",[s._v("可选项数据源，键名可通过 "),a("code",{pre:!0},[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("separator")]),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("自定义浮层类名")]),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("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-filter")]),a("td",[s._v("筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选")]),a("td",[s._v("function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._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",{pre:!0},[s._v("change-on-select")]),s._v(" 为 "),a("code",{pre:!0},[s._v("false")]),s._v(" 时可用")]),a("td",[s._v("各父级选项组成的数组")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("在 Cascader 失去焦点时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("在 Cascader 获得焦点时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("下拉框出现/隐藏时触发")]),a("td",[s._v("出现则为 true，隐藏则为 false")])])])])}],!1,null,null,null);l.options.__file="cascader.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}},r=(a(411),a(0)),l=Object(r.a)(e,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:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 150px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n \n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[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)],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)],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("默认 Hover 指示器触发"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Click 指示器触发"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("150px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可以将指示器的显示位置设置在容器外部")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n \n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n \n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-carousel",{attrs:{"indicator-position":"outside"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}),1)]],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("indicator-position")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"outside"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以设置切换箭头的显示时机")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n \n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n \n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}),1)]],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":interval")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"5000"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("arrow")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"always"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("300px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 200px;\n margin: 0;\n }\n \n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n \n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,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("type")]),s._v("属性设置为"),a("code",[s._v("card")]),s._v("即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":interval")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4000"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item in 6"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n \n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"carousel-zou-ma-deng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-zou-ma-deng","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel 走马灯")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zhi-shi-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-shi-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 指示器")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"qie-huan-jian-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qie-huan-jian-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 切换箭头")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"qia-pian-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 卡片化")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"carousel-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("—")])]),a("tr",[a("td",[s._v("loop")]),a("td",[s._v("是否循环显示")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("true")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"carousel-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Events")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("幻灯片切换时触发")]),t("td",[this._v("目前激活的幻灯片的索引，原幻灯片的索引")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"carousel-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[this._v("¶")]),this._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",{pre:!0},[s._v("el-carousel-item")]),s._v(" 的 "),a("code",{pre:!0},[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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"carousel-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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",{pre:!0},[s._v("setActiveItem")]),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("—")])])])])}],!1,null,null,null);l.options.__file="carousel.md";t.default=l.exports},function(s,t,a){"use strict";a.r(t);var e=a(21),r=a.n(e),l={data:function(){return{currentDate:r.a.format(new Date,"yyyy-MM-dd HH:mm")}}},n=(a(410),a(0)),v=Object(n.a)(l,function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("section",[s._m(0),e("p",[s._v("将信息聚合在卡片容器中展示。")]),s._m(1),e("p",[s._v("包含标题，内容和操作。")]),e("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n 卡片名称\n 操作按钮\n
    \n
    \n {{\'列表内容 \' + o }}\n
    \n    \n\n\n',script:null,style:'\n .text {\n font-size: 14px;\n }\n\n .item {\n margin-bottom: 18px;\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'}}},[e("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[e("el-card",{staticClass:"box-card"},[e("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[e("span",[s._v("卡片名称")]),e("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[s._v("操作按钮")])],1),s._l(4,function(t){return e("div",{key:t,staticClass:"text item"},[s._v("\n "+s._s("列表内容 "+t)+"\n ")])})],2)],1),e("p",[s._v("Card 组件包括"),e("code",[s._v("header")]),s._v("和"),e("code",[s._v("body")]),s._v("部分，"),e("code",[s._v("header")]),s._v("部分需要有显式具名 slot 分发，同时也是可选的。")]),e("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"hljs language-html"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"header"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("卡片名称"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"float: right; padding: 3px 0"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(">")]),s._v("操作按钮"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"o in 4"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text item"')]),s._v(">")]),s._v("\n {{'列表内容 ' + o }}\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),e("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".text")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n }\n\n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n }\n\n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":before")]),s._v(",\n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": table;\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("content")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('""')]),s._v(";\n }\n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("clear")]),s._v(": both\n }\n\n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".box-card")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("480px")]),s._v(";\n }\n")]),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),e("p",[s._v("卡片可以只有内容区域。")]),e("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n {{\'列表内容 \' + o }}\n
    \n    \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"}}},[e("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[e("el-card",{staticClass:"box-card"},s._l(4,function(t){return e("div",{key:t,staticClass:"text item"},[s._v("\n "+s._s("列表内容 "+t)+"\n ")])}),0)],1),e("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"hljs language-html"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"o in 4"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text item"')]),s._v(">")]),s._v("\n {{'列表内容 ' + o }}\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),e("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".text")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n }\n\n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".box-card")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("480px")]),s._v(";\n }\n")]),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),e("p",[s._v("可配置定义更丰富的内容展示。")]),e("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n
    \n 好吃的汉堡\n
    \n \n 操作按钮\n
    \n
    \n     \n     \n    \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'}}},[e("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[e("el-row",s._l(2,function(t,r){return e("el-col",{key:t,attrs:{span:8,offset:r>0?2:0}},[e("el-card",{attrs:{"body-style":{padding:"0px"}}},[e("img",{staticClass:"image",attrs:{src:a(224)}}),e("div",{staticStyle:{padding:"14px"}},[e("span",[s._v("好吃的汉堡")]),e("div",{staticClass:"bottom clearfix"},[e("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),e("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("操作按钮")])],1)])])],1)}),1)],1),e("p",[s._v("配置"),e("code",[s._v("body-style")]),s._v("属性来自定义"),e("code",[s._v("body")]),s._v("部分的"),e("code",[s._v("style")]),s._v("，我们还使用了布局组件。")]),e("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"hljs language-html"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"(o, index) in 2"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":body-style")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"image"')]),s._v(">")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("好吃的汉堡"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("time")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"time"')]),s._v(">")]),s._v("{{ currentDate }}"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"button"')]),s._v(">")]),s._v("操作按钮"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),e("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".time")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("13px")]),s._v(";\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#999")]),s._v(";\n }\n \n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".bottom")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("13px")]),s._v(";\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n\n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".button")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("float")]),s._v(": right;\n }\n\n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".image")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100%")]),s._v(";\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": block;\n }\n\n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":before")]),s._v(",\n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": table;\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("content")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('""')]),s._v(";\n }\n \n "),e("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("clear")]),s._v(": both\n }\n")]),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),e("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("currentDate")]),s._v(": "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("()\n };\n }\n}\n")]),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),e("p",[s._v("可对阴影的显示进行配置。")]),e("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n 总是显示\n \n \n \n \n 鼠标悬浮时显示\n \n \n \n \n 从不显示\n \n \n\n',script:null,style:null}}},[e("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[e("el-row",{attrs:{gutter:12}},[e("el-col",{attrs:{span:8}},[e("el-card",{attrs:{shadow:"always"}},[s._v("\n 总是显示\n ")])],1),e("el-col",{attrs:{span:8}},[e("el-card",{attrs:{shadow:"hover"}},[s._v("\n 鼠标悬浮时显示\n ")])],1),e("el-col",{attrs:{span:8}},[e("el-card",{attrs:{shadow:"never"}},[s._v("\n 从不显示\n ")])],1)],1)],1),e("p",[s._v("通过"),e("code",[s._v("shadow")]),s._v("属性设置卡片阴影出现的时机："),e("code",[s._v("always")]),s._v("、"),e("code",[s._v("hover")]),s._v("或"),e("code",[s._v("never")]),s._v("。")]),e("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"hljs language-html"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shadow")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"always"')]),s._v(">")]),s._v("\n 总是显示\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shadow")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v(">")]),s._v("\n 鼠标悬浮时显示\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shadow")]),s._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"never"')]),s._v(">")]),s._v("\n 从不显示\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"card-qia-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-qia-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card 卡片")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jian-dan-qia-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-dan-qia-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 简单卡片")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-tu-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带图片")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"qia-pian-yin-ying"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-yin-ying","aria-hidden":"true"}},[this._v("¶")]),this._v(" 卡片阴影")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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",{pre:!0},[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' }")])]),a("tr",[a("td",[s._v("shadow")]),a("td",[s._v("设置阴影显示时机")]),a("td",[s._v("string")]),a("td",[s._v("always / hover / never")]),a("td",[s._v("always")])])])])}],!1,null,"a3800462",null);v.options.__file="card.md";t.default=v.exports},,,,function(s,t,a){"use strict";a.r(t);var e={methods:{hello:function(){alert("Hello World!")}}},r=(a(406),a(0)),l=Object(r.a)(e,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:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"成功提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"消息提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"警告提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"错误提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("自定义关闭按钮为文字或其他符号。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"不可关闭的 alert"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":closable")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"自定义 close-text"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("close-text")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"知道了"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"设置了回调的 alert"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"hello"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n hello() {\n alert("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Hello World!'")]),s._v(");\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("表示某种状态时提升可读性。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"成功提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"消息提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"警告提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"错误提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"成功提示的文案",type:"success",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"消息提示的文案",type:"info",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"警告提示的文案",type:"warning",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"错误提示的文案",type:"error",center:"","show-icon":""}})]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"成功提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"消息提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"警告提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"错误提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("包含标题和内容，解释更详细的警告。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"带辅助性文字介绍"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"成功提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"消息提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"警告提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"错误提示的文案"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"alert-jing-gao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert-jing-gao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert 警告")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi-guan-bi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-guan-bi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义关闭按钮")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-you-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有 icon")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"wen-zi-ju-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-ju-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字居中")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("使用 "),t("code",{pre:!0},[this._v("center")]),this._v(" 属性让文字水平居中。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-you-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有辅助性文字介绍")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有 icon 和辅助性文字介绍")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("标题")]),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("center")]),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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("title")]),t("td",[this._v("标题的内容")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("关闭alert时触发的事件")]),t("td",[this._v("—")])])])])}],!1,null,null,null);l.options.__file="alert.md";t.default=l.exports},,,,,,,,,,,,,,,,,function(s,t,a){"use strict";a.r(t);var e={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,e={},r=document;e.left=(r.body.scrollWidth-s)/2,e.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}}},r=(a(390),a(0)),l=Object(r.a)(e,function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("div",[e("h2",[s._v("导航")]),s._m(0),s._m(1),e("div",{staticClass:"block"},[e("h3",[s._v("侧栏导航")]),e("el-row",{attrs:{gutter:20}},[e("el-col",{attrs:{span:9}},[e("p",[s._v("可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。")])]),e("el-col",{staticClass:"nav-demos",attrs:{span:15}},[e("img",{attrs:{src:a(198),alt:"一级类目"},on:{click:function(t){s.enlarge(846,t)}}}),e("h5",[s._v("一级类目")]),e("p",[s._v("适用于结构简单的网站：只有一级页面时，不需要使用面包屑。")]),e("img",{attrs:{src:a(199),alt:"二级类目"},on:{click:function(t){s.enlarge(846,t)}}}),e("h5",[s._v("二级类目")]),e("p",[s._v("侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。")]),e("img",{attrs:{src:a(200),alt:"三级类目"},on:{click:function(t){s.enlarge(846,t)}}}),e("h5",[s._v("三级类目")]),e("p",[s._v("适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。")])])],1)],1),e("div",{staticClass:"block"},[e("h3",[s._v("顶部导航")]),e("el-row",[e("el-col",{attrs:{span:10}},[e("p",[s._v("顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。")])]),e("el-col",{staticClass:"nav-demos",attrs:{span:14}},[e("img",{attrs:{src:a(201),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),e("p",[s._v("适用于导航较少，页面篇幅较长的网站。")])])],1)],1),e("transition",{attrs:{name:"fade"}},[e("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),e("transition",{attrs:{name:"zoom"}},[e("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}}},[e("div",{staticClass:"imgWrap",style:s.imgStyle},[e("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("div",{staticClass:"block"},[t("p",[this._v("导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("div",{staticClass:"block"},[t("h3",[this._v("选择合适的导航")]),t("p",[this._v("选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。")])])}],!1,null,"aadaaa32",null);l.options.__file="nav.vue";t.default=l.exports},,,function(s,t,a){"use strict";a.r(t);var e=[function(){var s=this.$createElement,t=this._self._c||s;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("网站快速成型工具")]),t("p",[this._v("Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库")])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("div",{staticClass:"jumbotron"},[t("div",[t("img",{staticClass:"jumbotron-plant-2",attrs:{src:a(186),alt:""}}),t("img",{staticClass:"jumbotron-web",attrs:{src:a(187),alt:""}}),t("img",{staticClass:"jumbotron-plant-1",attrs:{src:a(188),alt:""}}),t("img",{staticClass:"jumbotron-figure-1",attrs:{src:a(189),alt:""}}),t("img",{staticClass:"jumbotron-figure-2",attrs:{src:a(190),alt:""}})]),t("div",{attrs:{"data-hover-layer":"0"}},[t("img",{staticClass:"jumbotron-cloud-1",attrs:{src:a(191),alt:""}}),t("img",{staticClass:"jumbotron-cloud-2",attrs:{src:a(192),alt:""}})]),t("div",{attrs:{"data-hover-layer":"1"}},[t("img",{staticClass:"jumbotron-compo-1",attrs:{src:a(193),alt:""}}),t("img",{staticClass:"jumbotron-compo-2",attrs:{src:a(194),alt:""}}),t("img",{staticClass:"jumbotron-compo-3",attrs:{src:a(195),alt:""}})])])},function(){var s=this.$createElement,t=this._self._c||s;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:a(133),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])}],r=a(196),l={data:function(){return{lang:this.$route.meta.lang}},mounted:function(){new r.Hover(".jumbotron",{max:3,scale:1,perspective:700,layers:[{multiple:.01,reverseTranslate:!0},{multiple:.02,reverseTranslate:!0}]})}},n=(a(389),a(0)),v=Object(n.a)(l,function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("div",[s._m(0),s._m(1),e("div",{staticClass:"sponsors"},[e("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==s.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[e("img",{attrs:{width:"35px",src:a(132),alt:"tipe.io"}}),s._m(2)]),s._m(3)]),e("div",{staticClass:"cards"},[e("ul",{staticClass:"container"},[e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(183),alt:""}}),e("h3",[s._v("指南")]),e("p",[s._v("了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。")]),e("router-link",{attrs:{"active-class":"active",to:"/zh-CN/guide/design",exact:""}},[s._v("查看详情\n ")])],1)]),e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(184),alt:""}}),e("h3",[s._v("组件")]),e("p",[s._v("使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。")]),e("router-link",{attrs:{"active-class":"active",to:"/zh-CN/component/layout",exact:""}},[s._v("查看详情\n ")])],1)]),e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(185),alt:""}}),e("h3",[s._v("资源")]),e("p",[s._v("下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。")]),e("router-link",{attrs:{"active-class":"active",to:"/zh-CN/resource",exact:""}},[s._v("查看详情\n ")])],1)])])])])},e,!1,null,"b79c6774",null);v.options.__file="index.vue";t.default=v.exports},function(s,t,a){"use strict";a.r(t);var e={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"设计原则"},{path:"/nav",name:"导航"}]}}},r=(a(388),a(0)),l=Object(r.a)(e,function(){var s=this.$createElement,t=this._self._c||s;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);l.options.__file="guide.vue";t.default=l.exports},,function(s,t,a){"use strict";a.r(t);var e=a(73),r=a(63),l=a(29),n=a.n(l),v={data:function(){return{lang:this.$route.meta.lang,navsData:r,hover:!1,showBackToTop:!1,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null}},watch:{"$route.path":function(){var s=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){s.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var s=document.querySelectorAll("h2 a,h3 a,h4 a,h5 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(){var s=this;if(location.href.match(/#/g).length>1){var t=location.href.match(/#[^#]+$/g);if(!t)return;var a=document.querySelector(t[0]);if(!a)return;setTimeout(function(t){s.componentScrollBox.scrollTop=a.offsetTop},50)}},toTop:function(){this.hover=!1,this.showBackToTop=!1,this.componentScrollBox.scrollTop=0},handleScroll:function(){var s=this.componentScrollBox.scrollTop;this.showBackToTop=s>=.5*document.body.clientHeight,this.showHeader!==this.scrollTop>s&&(this.showHeader=this.scrollTop>s),0===s&&(this.showHeader=!0),this.navFaded||e.a.$emit("fadeNav"),this.scrollTop=s}},created:function(){var s=this;e.a.$on("navFade",function(t){s.navFaded=t}),window.addEventListener("hashchange",function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,s.renderAnchorHref()):s.goAnchor()})},mounted:function(){this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=n()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)}},p=(a(386),a(0)),_=Object(p.a)(v,function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[a("div",{staticClass:"page-container page-component"},[a("el-scrollbar",{staticClass:"page-component__nav"},[a("side-nav",{attrs:{data:s.navsData[s.lang],base:"/"+s.lang+"/component"}})],1),a("div",{staticClass:"page-component__content"},[a("router-view",{staticClass:"content"}),a("footer-nav")],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)])},[],!1,null,null,null);_.options.__file="component.vue";t.default=_.exports},,,,,,,,function(s,t,a){"use strict";a.r(t);var e={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1,num7:1,num8:1,num9:1}},methods:{handleChange:function(s){console.log(s)}}},r=(a(430),a(0)),l=Object(r.a)(e,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:'\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",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{min:1,max:10,label:"描述文字"},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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"描述文字"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value);\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num2: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("允许定义递增递减的步数控制")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num3: 5\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v("\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num9: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:s.num9,callback:function(t){s.num9=t},expression:"num9"}})]],2),a("p",[s._v("设置 "),a("code",[s._v("precision")]),s._v(" 属性可以控制数值精度，接收一个 "),a("code",[s._v("Number")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num9"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":precision")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"0.1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num9")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num4: 1,\n num5: 1,\n num6: 1,\n num7: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{model:{value:s.num4,callback:function(t){s.num4=t},expression:"num4"}}),a("el-input-number",{attrs:{size:"medium"},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"}}),a("el-input-number",{attrs:{size:"mini"},model:{value:s.num7,callback:function(t){s.num7=t},expression:"num7"}})]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num4"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num5"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num7"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num4")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num5")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num6")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num7")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num8: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:s.handleChange},model:{value:s.num8,callback:function(t){s.num8=t},expression:"num8"}})]],2),a("p",[s._v("设置 "),a("code",[s._v("controls-position")]),s._v(" 属性可以控制按钮位置。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"num8"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("controls-position")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("num8")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value);\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"inputnumber-ji-shu-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber-ji-shu-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber 计数器")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"bu-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 步数")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jing-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jing-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 精度")])},function(){var s=this.$createElement,t=this._self._c||s;return t("div",{staticClass:"tip"},[t("p",[t("code",{pre:!0},[this._v("precision")]),this._v(" 的值必须是一个非负整数，并且不能小于 "),t("code",{pre:!0},[this._v("step")]),this._v(" 的小数位数。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 尺寸")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("额外提供了 "),t("code",{pre:!0},[this._v("medium")]),this._v("、"),t("code",{pre:!0},[this._v("small")]),this._v("、"),t("code",{pre:!0},[this._v("mini")]),this._v(" 三种尺寸的数字输入框")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"an-niu-wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮位置")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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 / v-model")]),a("td",[s._v("绑定值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("设置计数器允许的最小值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("-Infinity")])]),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("precision")]),a("td",[s._v("数值精度")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),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")])]),a("tr",[a("td",[s._v("controls-position")]),a("td",[s._v("控制按钮位置")]),a("td",[s._v("string")]),a("td",[s._v("right")]),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("—")])]),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("placeholder")]),a("td",[s._v("输入框默认 placeholder")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("-")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._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("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)")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._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("focus")]),a("td",[s._v("使 input 获取焦点")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("select")]),a("td",[s._v("选中 input 中的文字")]),a("td",[s._v("—")])])])])}],!1,null,null,null);l.options.__file="input-number.md";t.default=l.exports},,,,,,,,,function(s,t,a){"use strict";a.r(t);a(387);var e=a(0),r=Object(e.a)({},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("div",[e("h2",[s._v("设计原则")]),e("el-row",{staticClass:"cards",attrs:{gutter:14}},[e("el-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(177),alt:"Consistency"}}),e("h4",[s._v("一致")]),e("span",[s._v("Consistency")])])]),e("el-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(178),alt:"Feedback"}}),e("h4",[s._v("反馈")]),e("span",[s._v("Feedback")])])]),e("el-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(179),alt:"Efficiency"}}),e("h4",[s._v("效率")]),e("span",[s._v("Efficiency")])])]),e("el-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(180),alt:"Controllability"}}),e("h4",[s._v("可控")]),e("span",[s._v("Controllability")])])])],1),e("h3",[s._v("一致性 Consistency")]),s._m(0),e("h3",[s._v("反馈 Feedback")]),s._m(1),e("h3",[s._v("效率 Efficiency")]),s._m(2),e("h3",[s._v("可控 Controllability")]),s._m(3)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("ul",[t("li",[t("strong",[this._v("与现实生活一致：")]),this._v("与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t("li",[t("strong",[this._v("在界面中一致：")]),this._v("所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("ul",[t("li",[t("strong",[this._v("控制反馈：")]),this._v("通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t("li",[t("strong",[this._v("页面反馈：")]),this._v("操作后，通过页面元素的变化清晰地展现当前状态。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("ul",[t("li",[t("strong",[this._v("简化流程：")]),this._v("设计简洁直观的操作流程；")]),t("li",[t("strong",[this._v("清晰明确：")]),this._v("语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),t("li",[t("strong",[this._v("帮助用户识别：")]),this._v("界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("ul",[t("li",[t("strong",[this._v("用户决策：")]),this._v("根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t("li",[t("strong",[this._v("结果可控：")]),this._v("用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])}],!1,null,"7aed89bc",null);r.options.__file="design.vue";t.default=r.exports},,function(s,t,a){"use strict";a.r(t);var e=[function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("div",{staticClass:"page-container page-resource"},[e("h2",[s._v("资源")]),e("p",[s._v("设计资源正在整理和完善中")]),e("div",{staticClass:"cards"},[e("ul",{staticClass:"container"},[e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(203),alt:""}}),e("h3",[s._v("Axure Components")]),e("p",[s._v("通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件")]),e("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[s._v("下载")])])]),e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(204),alt:""}}),e("h3",[s._v("Sketch Template")]),e("p",[s._v("从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格")]),e("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[s._v("下载")])])])])])])}],r=(a(391),a(0)),l=Object(r.a)({},function(){this.$createElement;this._self._c;return this._m(0)},e,!1,null,"0e25f6c5",null);l.options.__file="resource.vue";t.default=l.exports},,,,,,function(s,t,a){"use strict";a.r(t);a(407),a(408);var e=a(0),r=Object(e.a)({},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:'\n 评论\n\n\n 回复\n\n\n 评论\n\n\n 回复\n\n\n\n \n 点我查看\n \n \n \n 评论\n \n \n \n 回复\n \n \n \n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"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-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[a("el-button",{attrs:{size:"small"}},[s._v("评论")])],1),a("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[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",{attrs:{slot:"dropdown"},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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("评论"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("回复"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("评论"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("回复"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n 点我查看"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n 评论\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mark"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" />")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n 回复\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mark"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" />")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可自定义最大值。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n 评论\n\n\n 回复\n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"99"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("评论"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("回复"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以显示数字以外的文本内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n 评论\n\n\n 回复\n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"new"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("评论"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"hot"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("回复"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("以红点的形式标注需要关注的内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'数据查询\n\n \n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"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:"el-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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("is-dot")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("数据查询"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("is-dot")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"share-button"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"badge-biao-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge-biao-ji","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge 标记")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zui-da-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zui-da-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 最大值")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"xiao-hong-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-hong-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 小红点")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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")])]),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")]),a("td",[s._v("—")])])])])}],!1,null,"a0b77de4",null);r.options.__file="badge.md";t.default=r.exports},function(s,t,a){"use strict";a.r(t);var e=a(0),r=Object(e.a)({},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:'\n 首页\n 活动管理\n 活动列表\n 活动详情\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-breadcrumb",{attrs:{separator:"/"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("首页")]),a("el-breadcrumb-item",[a("a",{attrs:{href:"/"}},[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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("separator")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"/"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":to")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("首页"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"/"')]),s._v(">")]),s._v("活动管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("活动列表"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("活动详情"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n 首页\n 活动管理\n 活动列表\n 活动详情\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[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("separator-class")]),s._v(" 可使用相应的 "),a("code",[s._v("iconfont")]),s._v(" 作为分隔符，注意这将使 "),a("code",[s._v("separator")]),s._v(" 设置失效")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("separator-class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-right"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":to")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("首页"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("活动管理"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("活动列表"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("活动详情"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"breadcrumb-mian-bao-xie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-mian-bao-xie","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb 面包屑")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"tu-biao-fen-ge-fu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-fen-ge-fu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标分隔符")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"breadcrumb-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("斜杠'/'")])]),a("tr",[a("td",[s._v("separator-class")]),a("td",[s._v("图标分隔符 class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("-")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"breadcrumb-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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",{pre:!0},[s._v("vue-router")]),s._v(" 的 "),a("code",{pre:!0},[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")])])])])}],!1,null,null,null);r.options.__file="breadcrumb.md";t.default=r.exports},function(s,t,a){"use strict";a.r(t);a(409);var e=a(0),r=Object(e.a)({},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:'\n 默认按钮\n 主要按钮\n 成功按钮\n 信息按钮\n 警告按钮\n 危险按钮\n\n\n\n 朴素按钮\n 主要按钮\n 成功按钮\n 信息按钮\n 警告按钮\n 危险按钮\n\n\n\n 圆角按钮\n 主要按钮\n 成功按钮\n 信息按钮\n 警告按钮\n 危险按钮\n\n\n\n \n \n \n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",[a("el-button",[s._v("默认按钮")]),a("el-button",{attrs:{type:"primary"}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"success"}},[s._v("成功按钮")]),a("el-button",{attrs:{type:"info"}},[s._v("信息按钮")]),a("el-button",{attrs:{type:"warning"}},[s._v("警告按钮")]),a("el-button",{attrs:{type:"danger"}},[s._v("危险按钮")])],1),a("el-row",[a("el-button",{attrs:{plain:""}},[s._v("朴素按钮")]),a("el-button",{attrs:{type:"primary",plain:""}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"success",plain:""}},[s._v("成功按钮")]),a("el-button",{attrs:{type:"info",plain:""}},[s._v("信息按钮")]),a("el-button",{attrs:{type:"warning",plain:""}},[s._v("警告按钮")]),a("el-button",{attrs:{type:"danger",plain:""}},[s._v("危险按钮")])],1),a("el-row",[a("el-button",{attrs:{round:""}},[s._v("圆角按钮")]),a("el-button",{attrs:{type:"primary",round:""}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"success",round:""}},[s._v("成功按钮")]),a("el-button",{attrs:{type:"info",round:""}},[s._v("信息按钮")]),a("el-button",{attrs:{type:"warning",round:""}},[s._v("警告按钮")]),a("el-button",{attrs:{type:"danger",round:""}},[s._v("危险按钮")])],1),a("el-row",[a("el-button",{attrs:{icon:"el-icon-search",circle:""}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),a("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),a("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),a("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),a("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1),a("p",[s._v("使用"),a("code",[s._v("type")]),s._v("、"),a("code",[s._v("plain")]),s._v("、"),a("code",[s._v("round")]),s._v("和"),a("code",[s._v("circle")]),s._v("属性来定义 Button 的样式。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("默认按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("主要按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("成功按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("信息按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("警告按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(">")]),s._v("危险按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("朴素按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("主要按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("成功按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("信息按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("警告按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("危险按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("圆角按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("主要按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("成功按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("信息按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("警告按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("危险按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("circle")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("circle")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-check"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("circle")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-message"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("circle")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-star-off"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("circle")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("circle")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("按钮不可用状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n 默认按钮\n 主要按钮\n 成功按钮\n 信息按钮\n 警告按钮\n 危险按钮\n\n\n\n 朴素按钮\n 主要按钮\n 成功按钮\n 信息按钮\n 警告按钮\n 危险按钮\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",[a("el-button",{attrs:{disabled:""}},[s._v("默认按钮")]),a("el-button",{attrs:{type:"primary",disabled:""}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"success",disabled:""}},[s._v("成功按钮")]),a("el-button",{attrs:{type:"info",disabled:""}},[s._v("信息按钮")]),a("el-button",{attrs:{type:"warning",disabled:""}},[s._v("警告按钮")]),a("el-button",{attrs:{type:"danger",disabled:""}},[s._v("危险按钮")])],1),a("el-row",[a("el-button",{attrs:{plain:"",disabled:""}},[s._v("朴素按钮")]),a("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"success",plain:"",disabled:""}},[s._v("成功按钮")]),a("el-button",{attrs:{type:"info",plain:"",disabled:""}},[s._v("信息按钮")]),a("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[s._v("警告按钮")]),a("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[s._v("危险按钮")])],1)],1),a("p",[s._v("你可以使用"),a("code",[s._v("disabled")]),s._v("属性来定义按钮是否可用，它接受一个"),a("code",[s._v("Boolean")]),s._v("值。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("默认按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("主要按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("成功按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("信息按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("警告按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("危险按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("朴素按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("主要按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("成功按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("信息按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("警告按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("危险按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("没有边框和背景色的按钮。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'文字按钮\n文字按钮\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"}},[s._v("文字按钮")]),a("el-button",{attrs:{type:"text",disabled:""}},[s._v("文字按钮")])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(">")]),s._v("文字按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("文字按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n搜索\n上传\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),a("el-button",{attrs:{type:"primary",icon:"el-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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(">")]),s._v("搜索"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("上传"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-upload el-icon--right"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("以按钮组的方式出现，常用于多项类似操作。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n 上一页\n 下一页\n\n\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"el-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:"el-icon-edit"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1),a("p",[s._v("使用"),a("code",[s._v("")]),s._v("标签来嵌套你的按钮。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-left"')]),s._v(">")]),s._v("上一页"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("下一页"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-right el-icon--right"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("点击按钮后进行数据加载操作，在按钮上显示加载状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'加载中\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":loading")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("加载中"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n 默认按钮\n 中等按钮\n 小型按钮\n 超小按钮\n\n\n 默认按钮\n 中等按钮\n 小型按钮\n 超小按钮\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",[a("el-button",[s._v("默认按钮")]),a("el-button",{attrs:{size:"medium"}},[s._v("中等按钮")]),a("el-button",{attrs:{size:"small"}},[s._v("小型按钮")]),a("el-button",{attrs:{size:"mini"}},[s._v("超小按钮")])],1),a("el-row",[a("el-button",{attrs:{round:""}},[s._v("默认按钮")]),a("el-button",{attrs:{size:"medium",round:""}},[s._v("中等按钮")]),a("el-button",{attrs:{size:"small",round:""}},[s._v("小型按钮")]),a("el-button",{attrs:{size:"mini",round:""}},[s._v("超小按钮")])],1)],1),a("p",[s._v("额外的尺寸："),a("code",[s._v("medium")]),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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("默认按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("中等按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("小型按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("超小按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("默认按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("中等按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("小型按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("超小按钮"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"button-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button 按钮")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"wen-zi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字按钮")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"tu-biao-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标按钮")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"an-niu-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮组")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jia-zai-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 加载中")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("medium / 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("round")]),a("td",[s._v("是否圆角按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("circle")]),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")])])])])}],!1,null,null,null);r.options.__file="button.md";t.default=r.exports},function(s,t,a){"use strict";a.r(t);a(416);var e=a(0),r=Object(e.a)({},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:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box bg-blue"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#409EFF")])])])],1),s._m(2),a("p",[s._v("除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box bg-success"},[s._v("Success"),a("div",{staticClass:"value"},[s._v("#67C23A")])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box bg-warning"},[s._v("Warning"),a("div",{staticClass:"value"},[s._v("#E6A23C")])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box bg-danger"},[s._v("Danger"),a("div",{staticClass:"value"},[s._v("#F56C6C")])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box bg-info"},[s._v("Info"),a("div",{staticClass:"value"},[s._v("#909399")])])])],1),s._m(3),a("p",[s._v("中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-text-primary"},[s._v("主要文字"),a("div",{staticClass:"value"},[s._v("#303133")])]),a("div",{staticClass:"demo-color-box bg-text-regular"},[s._v("常规文字"),a("div",{staticClass:"value"},[s._v("#606266")])]),a("div",{staticClass:"demo-color-box bg-text-secondary"},[s._v("次要文字"),a("div",{staticClass:"value"},[s._v("#909399")])]),a("div",{staticClass:"demo-color-box bg-text-placeholder"},[s._v("占位文字"),a("div",{staticClass:"value"},[s._v("#C0C4CC")])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-border-base"},[s._v("一级边框"),a("div",{staticClass:"value"},[s._v("#DCDFE6")])]),a("div",{staticClass:"demo-color-box bg-border-light"},[s._v("二级边框"),a("div",{staticClass:"value"},[s._v("#E4E7ED")])]),a("div",{staticClass:"demo-color-box bg-border-lighter"},[s._v("三级边框"),a("div",{staticClass:"value"},[s._v("#EBEEF5")])]),a("div",{staticClass:"demo-color-box bg-border-extra-light"},[s._v("四级边框"),a("div",{staticClass:"value"},[s._v("#F2F6FC")])])])])],1)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"color-se-cai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-se-cai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color 色彩")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zhu-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 主色")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"fu-zhu-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 辅助色")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zhong-xing-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhong-xing-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 中性色")])}],!1,null,null,null);r.options.__file="color.md";t.default=r.exports},function(s,t,a){"use strict";a.r(t);var e=a(0),r=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[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("h3",{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-chalk-preview"}},[s._v("在线主题生成工具")]),s._v("。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。")]),a("p",[s._v("使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。")]),a("h3",{attrs:{id:"zai-xiang-mu-zhong-gai-bian-scss-bian-liang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zai-xiang-mu-zhong-gai-bian-scss-bian-liang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 在项目中改变 SCSS 变量")]),a("p",[s._v("Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 "),a("code",{pre:!0},[s._v("element-variables.scss")]),s._v("，写入以下内容：")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[s._v("/* 改变主题色变量 */\n$--color-primary: teal;\n\n/* 改变 icon 字体路径变量，必需 */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),a("p",[s._v("之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-JS"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'./element-variables.scss'")]),s._v("\n\nVue.use(Element)\n")])]),a("div",{staticClass:"tip"},[a("p",[s._v("需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。")])]),a("h3",{attrs:{id:"ming-ling-xing-zhu-ti-gong-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ming-ling-xing-zhu-ti-gong-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 命令行主题工具")]),a("p",[s._v("如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：")]),a("h4",{attrs:{id:"an-zhuang-gong-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang-gong-ju","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("安装工具")])]),a("p",[s._v("首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-shell"}},[s._v("npm i element-theme -g\n")])]),a("p",[s._v("安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-shell"}},[a("span",{pre:!0,attrs:{class:"hljs-meta"}},[s._v("#")]),a("span",{pre:!0,attrs:{class:"bash"}},[s._v(" 从 npm")]),s._v("\nnpm i element-theme-chalk -D\n"),a("span",{pre:!0,attrs:{class:"hljs-meta"}},[s._v("\n#")]),a("span",{pre:!0,attrs:{class:"bash"}},[s._v(" 从 GitHub")]),s._v("\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),a("h4",{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("¶")]),a("strong",[s._v("初始化变量文件")])]),a("p",[s._v("主题生成工具安装成功后，如果全局安装可以在命令行里通过 "),a("code",{pre:!0},[s._v("et")]),s._v(" 调用工具，如果安装在当前目录下，需要通过 "),a("code",{pre:!0},[s._v("node_modules/.bin/et")]),s._v(" 访问到命令。执行 "),a("code",{pre:!0},[s._v("-i")]),s._v(" 初始化变量文件。默认输出到 "),a("code",{pre:!0},[s._v("element-variables.scss")]),s._v("，当然你可以传参数指定文件输出目录。")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-shell"}},[s._v("et -i [可以自定义变量文件]\n"),a("span",{pre:!0,attrs:{class:"hljs-meta"}},[s._v("\n>")]),a("span",{pre:!0,attrs:{class:"bash"}},[s._v(" ✔ Generator variables file")]),s._v("\n")])]),a("p",[s._v("如果使用默认配置，执行后当前目录会有一个 "),a("code",{pre:!0},[s._v("element-variables.scss")]),s._v(" 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-css"}},[s._v("$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-id"}},[s._v("#409EFF")]),s._v(" !"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 10%) !"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* 53a8ff */")]),s._v("\n$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 20%) !"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* 66b1ff */")]),s._v("\n$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 30%) !"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* 79bbff */")]),s._v("\n$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-4")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 40%) !"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* 8cc5ff */")]),s._v("\n$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-5")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 50%) !"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* a0cfff */")]),s._v("\n$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-6")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 60%) !"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* b3d8ff */")]),s._v("\n$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-7")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 70%) !"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* c6e2ff */")]),s._v("\n$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-8")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 80%) !"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* d9ecff */")]),s._v("\n$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary-light-9")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("mix")]),s._v("($"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-white")]),s._v(", $"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(", 90%) !"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v("; "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* ecf5ff */")]),s._v("\n\n$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-success")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-id"}},[s._v("#67c23a")]),s._v(" !"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-warning")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-id"}},[s._v("#e6a23c")]),s._v(" !"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-danger")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-id"}},[s._v("#f56c6c")]),s._v(" !"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-info")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-id"}},[s._v("#909399")]),s._v(" !"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("default")]),s._v(";\n\n...\n")])]),a("h4",{attrs:{id:"xiu-gai-bian-liang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-bian-liang","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("修改变量")])]),a("p",[s._v("直接编辑 "),a("code",{pre:!0},[s._v("element-variables.scss")]),s._v(" 文件，例如修改主题色为红色。")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-CSS"}},[s._v("$"),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("red")]),s._v(";\n")])]),a("h4",{attrs:{id:"bian-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bian-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),a("strong",[s._v("编译主题")])]),a("p",[s._v("保存文件后，到命令行里执行 "),a("code",{pre:!0},[s._v("et")]),s._v(" 编译主题，如果你想启用 "),a("code",{pre:!0},[s._v("watch")]),s._v(" 模式，实时编译主题，增加 "),a("code",{pre:!0},[s._v("-w")]),s._v(" 参数；如果你在初始化时指定了自定义变量文件，则需要增加 "),a("code",{pre:!0},[s._v("-c")]),s._v(" 参数，并带上你的变量文件名")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-shell"}},[s._v("et\n"),a("span",{pre:!0,attrs:{class:"hljs-meta"}},[s._v("\n>")]),a("span",{pre:!0,attrs:{class:"bash"}},[s._v(" ✔ build theme font")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-meta"}},[s._v(">")]),a("span",{pre:!0,attrs:{class:"bash"}},[s._v(" ✔ build element theme")]),s._v("\n")])]),a("h4",{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("¶")]),a("strong",[s._v("引入自定义主题")])]),a("p",[s._v("默认情况下编译的主题目录是放在 "),a("code",{pre:!0},[s._v("./theme")]),s._v(" 下，你可以通过 "),a("code",{pre:!0},[s._v("-o")]),s._v(" 参数指定打包目录。像引入默认主题一样，在代码里直接引用 "),a("code",{pre:!0},[s._v("theme/index.css")]),s._v(" 文件即可。")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'../theme/index.css'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementUI "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),a("h4",{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("¶")]),a("strong",[s._v("搭配插件按需引入组件主题")])]),a("p",[s._v("如果是搭配 "),a("code",{pre:!0},[s._v("babel-plugin-component")]),s._v(" 一起使用，只需要修改 "),a("code",{pre:!0},[s._v(".babelrc")]),s._v(" 的配置，指定 "),a("code",{pre:!0},[s._v("styleLibraryName")]),s._v(" 路径为自定义主题相对于 "),a("code",{pre:!0},[s._v(".babelrc")]),s._v(" 的路径，注意要加 "),a("code",{pre:!0},[s._v("~")]),s._v("。")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-json"}},[s._v("{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": [["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"component"')]),s._v(", [\n {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"libraryName"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"element-ui"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"~theme"')]),s._v("\n }\n ]]]\n}\n")])]),a("p",[s._v("如果不清楚 "),a("code",{pre:!0},[s._v("babel-plugin-component")]),s._v(" 是什么，请阅读 "),a("a",{attrs:{href:"./#/zh-CN/component/quickstart"}},[s._v("快速上手")]),s._v(" 一节。更多 "),a("code",{pre:!0},[s._v("element-theme")]),s._v(" 用法请参考"),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("项目仓库")]),s._v("。")])])}],!1,null,null,null);r.options.__file="custom-theme.md";t.default=r.exports},,function(s,t,a){"use strict";a.r(t);a(428);var e=a(0),r=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[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",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 完整引入 Element")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementUI "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" locale "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[s._v("或")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 按需引入 Element")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button, Select } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" lang "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" locale "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 设置语言")]),s._v("\nlocale.use(lang)\n\n"),a("span",{pre:!0,attrs:{class:"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",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[s._v("{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plugins")]),s._v(": [\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),a("span",{pre:!0,attrs:{class:"hljs-regexp"}},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n ]\n}\n")])]),a("h2",{attrs:{id:"jian-rong-vue-i18n-at-5-x"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-vue-i18n-at-5-x","aria-hidden":"true"}},[s._v("¶")]),s._v(" 兼容 "),a("code",{pre:!0},[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",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"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",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v("\nVue.locale("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),a("span",{pre:!0,attrs:{class:"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",{pre:!0},[s._v("vue-i18n@5.x")]),s._v("，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("i18n")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("path, options")]),s._v(") ")]),s._v("{\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n }\n})\n")])]),a("h2",{attrs:{id:"jian-rong-vue-i18n-at-6-x"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-vue-i18n-at-6-x","aria-hidden":"true"}},[s._v("¶")]),s._v(" 兼容 "),a("code",{pre:!0},[s._v("vue-i18n@6.x")])]),a("p",[s._v("默认不支持 6.x 的 "),a("code",{pre:!0},[s._v("vue-i18n")]),s._v("，你需要手动处理。")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\n\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" messages = {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("en")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n ...enLocale "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 或者用 Object.assign({ message: 'hello' }, enLocale)")]),s._v("\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zh")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'你好'")]),s._v(",\n ...zhLocale "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 或者用 Object.assign({ message: '你好' }, zhLocale)")]),s._v("\n }\n}\n"),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" i18n = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" VueI18n({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("locale")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// set locale")]),s._v("\n messages, "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// set locale messages")]),s._v("\n})\n\nVue.use(Element, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("i18n")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key, value)\n})\n\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({ i18n }).$mount("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(")\n")])]),a("h2",{attrs:{id:"an-xu-jia-zai-li-ding-zhi-i18n"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-jia-zai-li-ding-zhi-i18n","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按需加载里定制 i18n")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-js"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" DatePicker "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element/lib/date-picker'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementLocale "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" messages = {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("en")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n ...enLocale\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zh")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'你好'")]),s._v(",\n ...zhLocale\n }\n}\n"),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" i18n = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" VueI18n({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("locale")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// set locale")]),s._v("\n messages, "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// set locale messages")]),s._v("\n})\n\nElementLocale.i18n("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key, value))\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",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"undefined"}}),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"undefined"}}),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"undefined"}}),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"undefined"}},[s._v("\n ELEMENT.locale(ELEMENT.lang.en)\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),a("p",[s._v("搭配 "),a("code",{pre:!0},[s._v("vue-i18n")]),s._v(" 使用")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"undefined"}}),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"undefined"}}),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"undefined"}}),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"undefined"}}),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"undefined"}}),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"actionscript"}},[s._v("\n Vue.locale("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", ELEMENT.lang.en)\n Vue.locale("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v(", ELEMENT.lang.zhCN)\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[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("捷克语（cs-CZ）")]),a("li",[s._v("乌克兰语（ua）")]),a("li",[s._v("土库曼语（tk）")]),a("li",[s._v("泰米尔语（ta）")]),a("li",[s._v("拉脱维亚语（lv）")]),a("li",[s._v("南非荷兰语（af-ZA）")]),a("li",[s._v("爱沙尼亚语（ee）")]),a("li",[s._v("斯洛文尼亚语（sl）")]),a("li",[s._v("阿拉伯语（ar）")]),a("li",[s._v("希伯来语（he）")]),a("li",[s._v("立陶宛语（lt）")]),a("li",[s._v("蒙古语（mn）")]),a("li",[s._v("哈萨克斯坦语（kz）")]),a("li",[s._v("匈牙利语（hu）")]),a("li",[s._v("罗马尼亚语（ro）")]),a("li",[s._v("库尔德语（ku）")]),a("li",[s._v("维吾尔语（ug-CN）")]),a("li",[s._v("高棉语（km）")]),a("li",[s._v("塞尔维亚语（sr）")]),a("li",[s._v("巴斯克语（eu）")]),a("li",[s._v("吉尔吉斯语（kg）")])]),a("p",[s._v("如果你需要使用其他的语言，欢迎贡献 PR：只需在 "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[s._v("这里")]),s._v(" 添加一个语言配置文件即可。")])])}],!1,null,null,null);r.options.__file="i18n.md";t.default=r.exports},,function(s,t,a){"use strict";a.r(t);var e=a(0),r=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[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",{pre:!0},[a("code",{pre:!0,attrs:{class:"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",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("\x3c!-- 引入样式 --\x3e")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("link")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("rel")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"stylesheet"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui/lib/theme-chalk/index.css"')]),s._v(">")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("\x3c!-- 引入组件库 --\x3e")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"undefined"}}),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),a("div",{staticClass:"tip"},[a("p",[s._v("我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 "),a("a",{attrs:{href:"https://unpkg.com"}},[s._v("unpkg.com")]),s._v("。")])]),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:"https://jsfiddle.net/hzfpyvg6/14/"}},[s._v("在线演示")])]),a("iframe",{attrs:{width:"100%",height:"600",src:"//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/",allowpaymentrequest:"",allowfullscreen:"allowfullscreen",frameborder:"0"}}),a("p",[s._v("如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节："),a("a",{attrs:{href:"/#/zh-CN/component/quickstart"}},[s._v("快速上手")]),s._v("。")])])}],!1,null,null,null);r.options.__file="installation.md";t.default=r.exports},function(s,t,a){"use strict";a.r(t);a(432);var e=a(0),r=Object(e.a)({},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:'\n
    \n    \n\n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n
    \n
    \n    \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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"24"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"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",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("分栏之间存在间隔。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n
    \n    \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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"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",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"16"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"16"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"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",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("支持偏移指定的栏数。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n    \n\n
    \n
    \n    \n\n
    \n    \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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"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",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"center"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"end"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"space-between"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"space-around"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"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",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n
    \n    \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",attrs:{slot:"source"},slot:"source"},[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":xl")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".el-col")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple-dark")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple-light")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#e5e9f2")]),s._v(";\n }\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".grid-content")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("min-height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("36px")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：")]),s._m(10),a("p",[s._v("包含的类名及其含义为：")]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"layout-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout 布局")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础布局")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"fen-lan-jian-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-jian-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分栏间隔")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"hun-he-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hun-he-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 混合布局")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"fen-lan-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-pian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分栏偏移")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 对齐方式")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("通过 "),t("code",{pre:!0},[this._v("flex")]),this._v(" 布局来对分栏进行灵活的对齐。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"xiang-ying-shi-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiang-ying-shi-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 响应式布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸："),a("code",{pre:!0},[s._v("xs")]),s._v("、"),a("code",{pre:!0},[s._v("sm")]),s._v("、"),a("code",{pre:!0},[s._v("md")]),s._v("、"),a("code",{pre:!0},[s._v("lg")]),s._v(" 和 "),a("code",{pre:!0},[s._v("xl")]),s._v("。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-yu-duan-dian-de-yin-cang-lei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-yu-duan-dian-de-yin-cang-lei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基于断点的隐藏类")])},function(){var s=this.$createElement,t=this._self._c||s;return t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-js"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("import")]),this._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[this._v("'element-ui/lib/theme-chalk/display.css'")]),this._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("hidden-xs-only")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("xs")]),s._v(" 尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-sm-only")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("sm")]),s._v(" 尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-sm-and-down")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("sm")]),s._v(" 及以下尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-sm-and-up")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("sm")]),s._v(" 及以上尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-md-only")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("md")]),s._v(" 尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-md-and-down")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("md")]),s._v(" 及以下尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-md-and-up")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("md")]),s._v(" 及以上尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-lg-only")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("lg")]),s._v(" 尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-lg-and-down")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("lg")]),s._v(" 及以下尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-lg-and-up")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("lg")]),s._v(" 及以上尺寸时隐藏")]),a("li",[a("code",{pre:!0},[s._v("hidden-xl-only")]),s._v(" - 当视口在 "),a("code",{pre:!0},[s._v("xl")]),s._v(" 尺寸时隐藏")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"row-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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")])]),a("tr",[a("td",[s._v("tag")]),a("td",[s._v("自定义元素标签")]),a("td",[s._v("string")]),a("td",[s._v("*")]),a("td",[s._v("div")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"col-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("24")])]),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",{pre:!0},[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",{pre:!0},[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",{pre:!0},[s._v("≥992px")]),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",{pre:!0},[s._v("≥1200px")]),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("xl")]),a("td",[a("code",{pre:!0},[s._v("≥1920px")]),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("tag")]),a("td",[s._v("自定义元素标签")]),a("td",[s._v("string")]),a("td",[s._v("*")]),a("td",[s._v("div")])])])])}],!1,null,null,null);r.options.__file="layout.md";t.default=r.exports},function(s,t,a){"use strict";a.r(t);a(439);var e=a(0),r=Object(e.a)({},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:'\n\n\n\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-progress",{attrs:{percentage:0}}),a("el-progress",{attrs:{percentage:70}}),a("el-progress",{attrs:{percentage:80,color:"#8e71c7"}}),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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"70"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"80"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#8e71c7"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("百分比不占用额外控件，适用于文件上传等场景。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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:80,color:"rgba(142, 113, 199, 0.7)"}}),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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"70"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"80"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"rgba(142, 113, 199, 0.7)"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\nDone\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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:80,color:"#8e71c7"}}),a("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),a("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}}),a("el-progress",{attrs:{type:"circle",percentage:100,status:"text"}},[s._v("Done")])],1),a("p",[s._v("Progress 组件可通过 "),a("code",[s._v("type")]),s._v(" 属性来指定使用环形进度条，在环形进度条中，还可以通过 "),a("code",[s._v("width")]),s._v(" 属性来设置其大小。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"25"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"80"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("color")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"#8e71c7"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(">")]),s._v("Done"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"progress-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress-jin-du-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progress 进度条")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-wai-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-wai-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 线形进度条 — 百分比外显")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-nei-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-nei-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 线形进度条 — 百分比内显")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"huan-xing-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#huan-xing-jin-du-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 环形进度条")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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/text")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("color")]),a("td",[s._v("进度条背景色（会覆盖 status 状态颜色）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),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")])])])])}],!1,null,null,null);r.options.__file="progress.md";t.default=r.exports},function(s,t,a){"use strict";a.r(t);var e=a(0),r=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[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-vue-cli-at-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-vue-cli-at-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 使用 vue-cli@3")]),a("p",[s._v("我们为新版的 vue-cli 准备了相应的 "),a("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[s._v("Element 插件")]),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("，你可以直接使用。对于 Laravel 用户，我们也准备了相应的"),a("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[s._v("模板")]),s._v("，同样可以直接下载使用。")]),a("p",[s._v("如果不希望使用我们提供的模板，请继续阅读。")]),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",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(";\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementUI "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/theme-chalk/index.css'")]),s._v(";\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" App "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'./App.vue'")]),s._v(";\n\nVue.use(ElementUI);\n\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"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",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-bash"}},[s._v("npm install babel-plugin-component -D\n")])]),a("p",[s._v("然后，将 .babelrc 修改为：")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-json"}},[s._v("{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"presets"')]),s._v(": [["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"es2015"')]),s._v(", { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"modules"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(" }]],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": [\n [\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"component"')]),s._v(",\n {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"libraryName"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"element-ui"')]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"theme-chalk"')]),s._v("\n }\n ]\n ]\n}\n")])]),a("p",[s._v("接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(";\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button, Select } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" App "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'./App.vue'")]),s._v(";\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n"),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* 或写为\n * Vue.use(Button)\n * Vue.use(Select)\n */")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"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/master/components.json"}},[s._v("components.json")]),s._v(" 为准）")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(";\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n Pagination,\n Dialog,\n Autocomplete,\n Dropdown,\n DropdownMenu,\n DropdownItem,\n Menu,\n Submenu,\n MenuItem,\n MenuItemGroup,\n Input,\n InputNumber,\n Radio,\n RadioGroup,\n RadioButton,\n Checkbox,\n CheckboxButton,\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 Badge,\n Card,\n Rate,\n Steps,\n Step,\n Carousel,\n CarouselItem,\n Collapse,\n CollapseItem,\n Cascader,\n ColorPicker,\n Transfer,\n Container,\n Header,\n Aside,\n Main,\n Footer,\n Loading,\n MessageBox,\n Message,\n Notification\n} "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"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(CheckboxButton);\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(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\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:"quan-ju-pei-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-pei-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局配置")]),a("p",[s._v("在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 "),a("code",{pre:!0},[s._v("size")]),s._v(" 与 "),a("code",{pre:!0},[s._v("zIndex")]),s._v(" 字段。"),a("code",{pre:!0},[s._v("size")]),s._v(" 用于改变组件的默认尺寸，"),a("code",{pre:!0},[s._v("zIndex")]),s._v(" 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：")]),a("p",[s._v("完整引入 Element：")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-js"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(";\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\nVue.use(Element, { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'small'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zIndex")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(" });\n")])]),a("p",[s._v("按需引入 Element：")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-js"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(";\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button } "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n\nVue.prototype.$ELEMENT = { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'small'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("zIndex")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(" };\nVue.use(Button);\n")])]),a("p",[s._v("按照以上设置，项目中所有拥有 "),a("code",{pre:!0},[s._v("size")]),s._v(" 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。")]),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("h3",{attrs:{id:"shi-yong-nuxt-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-nuxt-js","aria-hidden":"true"}},[s._v("¶")]),s._v(" 使用 Nuxt.js")]),a("p",[s._v("我们还可以使用 "),a("a",{attrs:{href:"https://nuxtjs.org"}},[s._v("Nuxt.js")]),s._v("：")]),a("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[a("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);r.options.__file="quickstart.md";t.default=r.exports},,,,function(s,t,a){"use strict";a.r(t);a(453);var e=a(0),r=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[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",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-css"}},[a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("font-family")]),s._v(': "'),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("Helvetica")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("Neue")]),s._v('",'),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("Helvetica")]),s._v(',"'),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("PingFang")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("SC")]),s._v('","'),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("Hiragino")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("Sans")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("GB")]),s._v('","'),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("Microsoft")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("YaHei")]),s._v('","微软雅黑",'),a("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("Arial")]),s._v(","),a("span",{pre:!0,attrs:{class:"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")])])])])])}],!1,null,null,null);r.options.__file="typography.md";t.default=r.exports},,,,,,,,,,,,function(s,t,a){"use strict";var e=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:'\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: #409EFF;\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show = !show"')]),s._v(">")]),s._v("Click Me"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-fade-in-linear"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in-linear"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-fade-in"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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: #409EFF;\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show2 = !show2"')]),s._v(">")]),s._v("Click Me"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-center"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-center"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-top"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-top"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-bottom"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-bottom"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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: #409EFF;\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show3 = !show3"')]),s._v(">")]),s._v("Click Me"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px; height: 200px;"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"show3"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("show3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"css"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7)],1)},r=[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"nei-zhi-guo-du-dong-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nei-zhi-guo-du-dong-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 内置过渡动画")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("Element 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 "),t("a",{attrs:{href:"https://cn.vuejs.org/v2/api/#transition"}},[this._v("transition 组件文档")]),this._v(" 。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"fade-dan-ru-dan-chu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade-dan-ru-dan-chu","aria-hidden":"true"}},[this._v("¶")]),this._v(" fade 淡入淡出")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zoom-suo-fang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom-suo-fang","aria-hidden":"true"}},[this._v("¶")]),this._v(" zoom 缩放")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"collapse-zhan-kai-zhe-die"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhan-kai-zhe-die","aria-hidden":"true"}},[this._v("¶")]),this._v(" collapse 展开折叠")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("使用 "),t("code",{pre:!0},[this._v("el-collapse-transition")]),this._v(" 组件实现折叠展开效果。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"an-xu-yin-ru"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按需引入")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-js"}},[a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// fade/zoom 等")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/theme-chalk/base.css'")]),s._v(";\n"),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// collapse 展开折叠")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" CollapseTransition "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/transitions/collapse-transition'")]),s._v(";\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}];a.d(t,"a",function(){return e}),a.d(t,"b",function(){return r})},,,,function(s,t,a){"use strict";var e=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:'\n\n',script:"\n export default {\n data() {\n return {\n checked: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox",{model:{value: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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("\x3c!-- `checked` 为 true 或 false --\x3e")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checked"')]),s._v(">")]),s._v("备选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checked")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("多选框不可用状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n checked1: false,\n checked2: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox",{attrs:{disabled:""},model:{value: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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checked1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("备选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checked2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("备选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checked1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checked2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n checkList: ['选中且禁用','复选框 A']\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkList"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"复选框 A"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"复选框 B"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"复选框 C"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"禁用"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选中且禁用"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkList")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选中且禁用'")]),s._v(","),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'复选框 A'")]),s._v("]\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['上海', '北京', '广州', '深圳'];\n export default {\n data() {\n return {\n checkAll: false,\n checkedCities: ['上海', '北京'],\n cities: cityOptions,\n isIndeterminate: true\n };\n },\n methods: {\n handleCheckAllChange(val) {\n this.checkedCities = val ? 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",attrs:{slot:"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))])}),1)]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":indeterminate")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"isIndeterminate"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkAll"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCheckAllChange"')]),s._v(">")]),s._v("全选"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkedCities"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleCheckedCitiesChange"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'北京'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'广州'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'深圳'")]),s._v("];\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkAll")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkedCities")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'北京'")]),s._v("],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions,\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("isIndeterminate")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleCheckAllChange(val) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".checkedCities = val ? cityOptions : [];\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".isIndeterminate = "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n },\n handleCheckedCitiesChange(value) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" checkedCount = value.length;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".checkAll = checkedCount === "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cities.length;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".isIndeterminate = checkedCount > "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v(" && checkedCount < "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cities.length;\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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))])}),1)]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" \n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkedCities1"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'北京'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'广州'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'深圳'")]),s._v("];\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkedCities1")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'北京'")]),s._v("],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("按钮样式的多选组合。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['上海', '北京', '广州', '深圳'];\n export default {\n data () {\n return {\n checkboxGroup1: ['上海'],\n checkboxGroup2: ['上海'],\n checkboxGroup3: ['上海'],\n checkboxGroup4: ['上海'],\n cities: cityOptions\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[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))])}),1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"medium"},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}},[s._v(s._s(t))])}),1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},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,disabled:"北京"===t}},[s._v(s._s(t))])}),1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:s.checkboxGroup4,callback:function(t){s.checkboxGroup4=t},expression:"checkboxGroup4"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}),1)],1)]],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("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkboxGroup1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkboxGroup2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkboxGroup3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"city === '北京'\"")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkboxGroup4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'北京'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'广州'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'深圳'")]),s._v("];\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkboxGroup1")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v("],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkboxGroup2")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v("],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkboxGroup3")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v("],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkboxGroup4")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v("],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n checked3: true,\n checked4: false,\n checked5: false,\n checked6: true,\n checkboxGroup5: [],\n checkboxGroup6: []\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-checkbox",{attrs:{label:"备选项1",border:""},model:{value:s.checked3,callback:function(t){s.checked3=t},expression:"checked3"}}),a("el-checkbox",{attrs:{label:"备选项2",border:""},model:{value:s.checked4,callback:function(t){s.checked4=t},expression:"checked4"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox",{attrs:{label:"备选项1",border:"",size:"medium"},model:{value:s.checked5,callback:function(t){s.checked5=t},expression:"checked5"}}),a("el-checkbox",{attrs:{label:"备选项2",border:"",size:"medium"},model:{value:s.checked6,callback:function(t){s.checked6=t},expression:"checked6"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup5,callback:function(t){s.checkboxGroup5=t},expression:"checkboxGroup5"}},[a("el-checkbox",{attrs:{label:"备选项1",border:""}}),a("el-checkbox",{attrs:{label:"备选项2",border:"",disabled:""}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:s.checkboxGroup6,callback:function(t){s.checkboxGroup6=t},expression:"checkboxGroup6"}},[a("el-checkbox",{attrs:{label:"备选项1",border:""}}),a("el-checkbox",{attrs:{label:"备选项2",border:""}})],1)],1)]],2),a("p",[s._v("设置"),a("code",[s._v("border")]),s._v("属性可以渲染为带有边框的多选框。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checked3"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"备选项1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checked4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"备选项2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checked5"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"备选项1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checked6"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"备选项2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkboxGroup5"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"备选项1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"备选项2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"checkboxGroup6"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"备选项1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"备选项2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checked3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checked4")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checked5")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checked6")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkboxGroup5")]),s._v(": [],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("checkboxGroup6")]),s._v(": []\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},r=[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"checkbox-duo-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-duo-xuan-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox 多选框")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"duo-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan-kuang-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多选框组")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"indeterminate-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" indeterminate 状态")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[t("code",{pre:!0},[this._v("indeterminate")]),this._v(" 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ke-xuan-xiang-mu-shu-liang-de-xian-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-xiang-mu-shu-liang-de-xian-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可选项目数量的限制")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("使用 "),t("code",{pre:!0},[this._v("min")]),this._v(" 和 "),t("code",{pre:!0},[this._v("max")]),this._v(" 属性能够限制可以被勾选的项目的数量。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"an-niu-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮样式")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-you-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有边框")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"checkbox-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("value / v-model")]),a("td",[s._v("绑定值")]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("选中状态的值（只有在"),a("code",{pre:!0},[s._v("checkbox-group")]),s._v("或者绑定对象类型为"),a("code",{pre:!0},[s._v("array")]),s._v("时有效）")]),a("td",[s._v("string / number / boolean")]),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("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("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("size")]),a("td",[s._v("Checkbox 的尺寸，仅在 border 为真时有效")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),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("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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"checkbox-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Events")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("当绑定值变化时触发的事件")]),t("td",[this._v("更新后的值")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"checkbox-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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 / v-model")]),a("td",[s._v("绑定值")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),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("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("—")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("按钮形式的 Checkbox 激活时的文本颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("按钮形式的 Checkbox 激活时的填充色和边框色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"checkbox-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Events")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("当绑定值变化时触发的事件")]),t("td",[this._v("更新后的值")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"checkbox-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-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("选中状态的值（只有在"),a("code",{pre:!0},[s._v("checkbox-group")]),s._v("或者绑定对象类型为"),a("code",{pre:!0},[s._v("array")]),s._v("时有效）")]),a("td",[s._v("string / number / boolean")]),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("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("—")])]),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.d(t,"a",function(){return e}),a.d(t,"b",function(){return r})},function(s,t,a){"use strict";var e=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:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions1: {\n disabledDate(time) {\n return time.getTime() > Date.now();\n },\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",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"date",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:{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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择日期"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pickerOptions1")]),s._v(": {\n disabledDate(time) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" time.getTime() > "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v(".now();\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'今天'")]),s._v(",\n onClick(picker) {\n picker.$emit("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("());\n }\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'昨天'")]),s._v(",\n onClick(picker) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(");\n picker.$emit("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一周前'")]),s._v(",\n onClick(picker) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }]\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("通过扩展基础的日期选择，可以选择周、月、年或多个日期")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n
    \n 周\n \n \n
    \n
    \n 月\n \n \n
    \n
    \n
    \n
    \n 年\n \n \n
    \n
    \n 多个日期\n \n \n
    \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n value3: '',\n value4: '',\n value5: '',\n value14: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"container"},[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:"container"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("年")]),a("el-date-picker",{attrs:{type:"year",placeholder:"选择年"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("多个日期")]),a("el-date-picker",{attrs:{type:"dates",placeholder:"选择一个或多个日期"},model:{value:s.value14,callback:function(t){s.value14=t},expression:"value14"}})],1)])]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"container"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("周"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"week"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"yyyy 第 WW 周"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择周"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("月"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"month"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择月"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"container"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("年"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"year"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择年"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("多个日期"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dates"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value14"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择一个或多个日期"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value14")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可在一个选择器中便捷地选择一个时间范围")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"daterange","range-separator":"至","start-placeholder":"开始日期","end-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","unlink-panels":"","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期","picker-options":s.pickerOptions2},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("p",[s._v("在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用"),a("code",[s._v("unlink-panels")]),s._v("属性解除联动。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"至"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"开始日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"结束日期"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("unlink-panels")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"至"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"开始日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"结束日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pickerOptions2")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'最近一周'")]),s._v(",\n onClick(picker) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'最近一个月'")]),s._v(",\n onClick(picker) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("30")]),s._v(");\n picker.$emit("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'最近三个月'")]),s._v(",\n onClick(picker) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("90")]),s._v(");\n picker.$emit("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }]\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value10: '',\n value11: '',\n value12: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认为 Date 对象")]),a("div",{staticClass:"demonstration"},[s._v("值："+s._s(s.value10))]),a("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("使用 value-format")]),a("div",{staticClass:"demonstration"},[s._v("值："+s._s(s.value11))]),a("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日","value-format":"yyyy-MM-dd"},model:{value:s.value11,callback:function(t){s.value11=t},expression:"value11"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("时间戳")]),a("div",{staticClass:"demonstration"},[s._v("值："+s._s(s.value12))]),a("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日","value-format":"timestamp"},model:{value:s.value12,callback:function(t){s.value12=t},expression:"value12"}})],1)]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("默认为 Date 对象"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("值：{{ value10 }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value10"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"yyyy 年 MM 月 dd 日"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("使用 value-format"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("值：{{ value11 }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value11"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"yyyy 年 MM 月 dd 日"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value-format")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"yyyy-MM-dd"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("时间戳"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("值：{{ value12 }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value12"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"yyyy 年 MM 月 dd 日"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value-format")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"timestamp"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value10")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value11")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value12")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("在选择日期范围时，指定起始日期和结束日期的默认时刻。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value13: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("p",[s._v("组件值："+s._s(s.value13))]),a("el-date-picker",{attrs:{type:"daterange","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["00:00:00","23:59:59"]},model:{value:s.value13,callback:function(t){s.value13=t},expression:"value13"}})],1)]],2),a("p",[s._v("选择日期范围时，默认情况下，起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过"),a("code",[s._v("default-time")]),s._v("可以分别指定二者的具体时刻。"),a("code",[s._v("default-time")]),s._v("接受一个数组，其中的值为形如"),a("code",[s._v("12:00:00")]),s._v("的字符串，第一个值控制起始日期的时刻，第二个值控制结束日期的时刻。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("组件值：{{ value13 }}"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value13"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"开始日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"结束日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-time")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['00:00:00', '23:59:59']\"")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value13")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},r=[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"datepicker-ri-qi-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker-ri-qi-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker 日期选择器")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"xuan-ze-ri"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择日")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"qi-ta-ri-qi-dan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-ri-qi-dan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 其他日期单位")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"xuan-ze-ri-qi-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri-qi-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择日期范围")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ri-qi-ge-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-ge-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期格式")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("使用"),t("code",{pre:!0},[this._v("format")]),this._v("指定输入框的格式；使用"),t("code",{pre:!0},[this._v("value-format")]),this._v("指定绑定值的格式。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("默认情况下，组件接受并返回"),t("code",{pre:!0},[this._v("Date")]),this._v("对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：")])},function(){var s=this.$createElement,t=this._self._c||s;return t("div",{staticClass:"warning"},[t("p",[this._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("th",[s._v("举例")])])]),a("tbody",[a("tr",[a("td",[a("code",{pre:!0},[s._v("yyyy")])]),a("td",[s._v("年")]),a("td"),a("td",[s._v("2017")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("M")])]),a("td",[s._v("月")]),a("td",[s._v("不补0")]),a("td",[s._v("1")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("MM")])]),a("td",[s._v("月")]),a("td"),a("td",[s._v("01")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("W")])]),a("td",[s._v("周")]),a("td",[s._v("仅周选择器的 "),a("code",{pre:!0},[s._v("format")]),s._v(" 可用；不补0")]),a("td",[s._v("1")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("WW")])]),a("td",[s._v("周")]),a("td",[s._v("仅周选择器的 "),a("code",{pre:!0},[s._v("format")]),s._v(" 可用")]),a("td",[s._v("01")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("d")])]),a("td",[s._v("日")]),a("td",[s._v("不补0")]),a("td",[s._v("2")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("dd")])]),a("td",[s._v("日")]),a("td"),a("td",[s._v("02")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("H")])]),a("td",[s._v("小时")]),a("td",[s._v("24小时制；不补0")]),a("td",[s._v("3")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("HH")])]),a("td",[s._v("小时")]),a("td",[s._v("24小时制")]),a("td",[s._v("03")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("h")])]),a("td",[s._v("小时")]),a("td",[s._v("12小时制，须和 "),a("code",{pre:!0},[s._v("A")]),s._v(" 或 "),a("code",{pre:!0},[s._v("a")]),s._v(" 使用；不补0")]),a("td",[s._v("3")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("hh")])]),a("td",[s._v("小时")]),a("td",[s._v("12小时制，须和 "),a("code",{pre:!0},[s._v("A")]),s._v(" 或 "),a("code",{pre:!0},[s._v("a")]),s._v(" 使用")]),a("td",[s._v("03")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("m")])]),a("td",[s._v("分钟")]),a("td",[s._v("不补0")]),a("td",[s._v("4")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("mm")])]),a("td",[s._v("分钟")]),a("td"),a("td",[s._v("04")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("s")])]),a("td",[s._v("秒")]),a("td",[s._v("不补0")]),a("td",[s._v("5")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("ss")])]),a("td",[s._v("秒")]),a("td"),a("td",[s._v("05")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("A")])]),a("td",[s._v("AM/PM")]),a("td",[s._v("仅 "),a("code",{pre:!0},[s._v("format")]),s._v(" 可用，大写")]),a("td",[s._v("AM")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("a")])]),a("td",[s._v("am/pm")]),a("td",[s._v("仅 "),a("code",{pre:!0},[s._v("format")]),s._v(" 可用，小写")]),a("td",[s._v("am")])]),a("tr",[a("td",[a("code",{pre:!0},[s._v("timestamp")])]),a("td",[s._v("JS时间戳")]),a("td",[s._v("仅 "),a("code",{pre:!0},[s._v("value-format")]),s._v(" 可用；组件绑定值为"),a("code",{pre:!0},[s._v("number")]),s._v("类型")]),a("td",[s._v("1483326245000")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"mo-ren-xian-shi-ri-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-xian-shi-ri-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认显示日期")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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 / v-model")]),a("td",[s._v("绑定值")]),a("td",[s._v("date(DatePicker) / array(DateRangePicker)")]),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("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("start-placeholder")]),a("td",[s._v("范围选择时开始日期的占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-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/dates/ 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("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[s._v("日期格式")])]),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("可选，选择器打开时默认显示的时间")]),a("td",[s._v("Date")]),a("td",[s._v("可被"),a("code",{pre:!0},[s._v("new Date()")]),s._v("解析")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-time")]),a("td",[s._v("范围选择时选中日期所使用的当日内具体时刻")]),a("td",[s._v("string[]")]),a("td",[s._v("数组，长度为 2，每项值为字符串，形如"),a("code",{pre:!0},[s._v("12:00:00")]),s._v("，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 "),a("code",{pre:!0},[s._v("00:00:00")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value-format")]),a("td",[s._v("可选，绑定值的格式。不指定则绑定值为 Date 对象")]),a("td",[s._v("string")]),a("td",[s._v("见"),a("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[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("—")])]),a("tr",[a("td",[s._v("unlink-panels")]),a("td",[s._v("在范围选择器里取消两个日期面板之间的联动")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("prefix-icon")]),a("td",[s._v("自定义头部图标的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-date")])]),a("tr",[a("td",[s._v("clear-icon")]),a("td",[s._v("自定义清空图标的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-circle-close")])]),a("tr",[a("td",[s._v("validate-event")]),a("td",[s._v("输入时是否触发表单的校验")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("true")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._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",{pre:!0},[s._v("daterange")]),s._v(" 或 "),a("code",{pre:!0},[s._v("datetimerange")]),s._v(" 才生效")]),a("td",[s._v("Function({ maxDate, minDate })")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._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("code",{pre:!0},[s._v("value-format")]),s._v(" 控制")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("当 input 失去焦点时触发")]),a("td",[s._v("组件实例")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("当 input 获得焦点时触发")]),a("td",[s._v("组件实例")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("—")])])])])}];a.d(t,"a",function(){return e}),a.d(t,"b",function(){return r})},function(s,t,a){"use strict";var e=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:'\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 value3: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("设置默认时间")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间","default-time":"12:00:00"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"datetime"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择日期时间"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"datetime"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择日期时间"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("设置默认时间"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"datetime"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选择日期时间"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("default-time")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"12:00:00"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pickerOptions1")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'今天'")]),s._v(",\n onClick(picker) {\n picker.$emit("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("());\n }\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'昨天'")]),s._v(",\n onClick(picker) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(");\n picker.$emit("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'一周前'")]),s._v(",\n onClick(picker) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }]\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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 value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n value5: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"datetimerange","range-separator":"至","start-placeholder":"开始日期","end-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:{type:"datetimerange","picker-options":s.pickerOptions2,"range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期",align:"right"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("type")]),s._v("为"),a("code",[s._v("datetimerange")]),s._v("即可选择日期和时间范围")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"至"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"开始日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"结束日期"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"pickerOptions2"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"至"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"开始日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"结束日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("pickerOptions2")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'最近一周'")]),s._v(",\n onClick(picker) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'最近一个月'")]),s._v(",\n onClick(picker) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("30")]),s._v(");\n picker.$emit("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'最近三个月'")]),s._v(",\n onClick(picker) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("90")]),s._v(");\n picker.$emit("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }]\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": ["),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v("), "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("11")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10")]),s._v(")],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value6: '',\n value7: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("起始日期时刻为 12:00:00")]),a("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["12:00:00"]},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("起始日期时刻为 12:00:00，结束日期时刻为 08:00:00")]),a("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["12:00:00","08:00:00"]},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("p",[s._v("使用"),a("code",[s._v("datetimerange")]),s._v("进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的"),a("code",[s._v("00:00:00")]),s._v("作为起始与结束的时刻；通过选项"),a("code",[s._v("default-time")]),s._v("可以控制选中起始与结束日期时所使用的具体时刻。"),a("code",[s._v("default-time")]),s._v("接受一个数组，数组每项值为字符串，形如"),a("code",[s._v("12:00:00")]),s._v("，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("起始日期时刻为 12:00:00"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"开始日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"结束日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-time")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['12:00:00']\"")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("起始日期时刻为 12:00:00，结束日期时刻为 08:00:00"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"开始日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"结束日期"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":default-time")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("\"['12:00:00', '08:00:00']\"")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[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),s._m(13),s._m(14),s._m(15),s._m(16)],1)},r=[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"datetimepicker-ri-qi-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker-ri-qi-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker 日期时间选择器")])},function(){var s=this.$createElement,t=this._self._c||s;return t("div",{staticClass:"tip"},[t("p",[this._v("DateTimePicker 由 DatePicker 和 TimePicker 派生，"),t("code",{pre:!0},[this._v("Picker Options")]),this._v(" 或者其他选项可以参照 DatePicker 和 TimePicker。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ri-qi-he-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期和时间点")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ri-qi-he-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期和时间范围")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"mo-ren-de-qi-shi-yu-jie-shu-shi-ke"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-de-qi-shi-yu-jie-shu-shi-ke","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认的起始与结束时刻")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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 / v-model")]),a("td",[s._v("绑定值")]),a("td",[s._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),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("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("start-placeholder")]),a("td",[s._v("范围选择时开始日期的占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-placeholder")]),a("td",[s._v("范围选择时结束日期的占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("time-arrow-control")]),a("td",[s._v("是否使用箭头进行时间选择")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),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("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[s._v("日期格式")])]),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("'-'")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("可选，选择器打开时默认显示的时间")]),a("td",[s._v("Date")]),a("td",[s._v("可被"),a("code",{pre:!0},[s._v("new Date()")]),s._v("解析")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-time")]),a("td",[s._v("选中日期后的默认具体时刻")]),a("td",[s._v("非范围选择时：string / 范围选择时：string[]")]),a("td",[s._v("非范围选择时：形如"),a("code",{pre:!0},[s._v("12:00:00")]),s._v("的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如"),a("code",{pre:!0},[s._v("12:00:00")]),s._v("，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 "),a("code",{pre:!0},[s._v("00:00:00")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value-format")]),a("td",[s._v("可选，绑定值的格式。不指定则绑定值为 Date 对象")]),a("td",[s._v("string")]),a("td",[s._v("见"),a("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[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("—")])]),a("tr",[a("td",[s._v("unlink-panels")]),a("td",[s._v("在范围选择器里取消两个日期面板之间的联动")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("prefix-icon")]),a("td",[s._v("自定义头部图标的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-date")])]),a("tr",[a("td",[s._v("clear-icon")]),a("td",[s._v("自定义清空图标的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-circle-close")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._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")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._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("用户确认选定的值时触发")]),a("td",[s._v("组件绑定值。格式与绑定值一致，可受 "),a("code",{pre:!0},[s._v("value-format")]),s._v(" 控制")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("当 input 失去焦点时触发")]),a("td",[s._v("组件实例")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("当 input 获得焦点时触发")]),a("td",[s._v("组件实例")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("—")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("range-separator")]),t("td",[this._v("自定义分隔符")])])])])}];a.d(t,"a",function(){return e}),a.d(t,"b",function(){return r})},function(s,t,a){"use strict";var e=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:'点击打开 Dialog\n\n\n 这是一段信息\n \n 取 消\n 确 定\n \n\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",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},[s._v("点击打开 Dialog")]),a("el-dialog",{attrs:{title:"提示",visible:s.dialogVisible,width:"30%","before-close":s.handleClose},on:{"update:visible":function(t){s.dialogVisible=t}}},[a("span",[s._v("这是一段信息")]),a("span",{staticClass:"dialog-footer",attrs:{slot:"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("visible")]),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("before-close")]),s._v("的用法。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("点击打开 Dialog"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"提示"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogVisible"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":before-close")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("这是一段信息"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("取 消"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("确 定"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dialogVisible")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClose(done) {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'确认关闭？'")]),s._v(")\n .then("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n done();\n })\n .catch("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {});\n }\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("p",[s._v("Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\x3c!-- Table --\x3e\n打开嵌套表格的 Dialog\n\n\n \n \n \n \n \n\n\n\x3c!-- Form --\x3e\n打开嵌套表单的 Dialog\n\n\n \n \n \n \n \n \n \n \n \n \n \n
    \n 取 消\n 确 定\n
    \n    \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",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},[s._v("打开嵌套表格的 Dialog")]),a("el-dialog",{attrs:{title:"收货地址",visible:s.dialogTableVisible},on:{"update:visible":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",{attrs:{title:"收货地址",visible:s.dialogFormVisible},on:{"update:visible":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",{attrs:{autocomplete:"off"},model:{value:s.form.name,callback:function(t){s.$set(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.$set(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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("\x3c!-- Table --\x3e")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("打开嵌套表格的 Dialog"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"收货地址"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"gridData"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"日期"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"姓名"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"地址"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("\x3c!-- Form --\x3e")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("打开嵌套表单的 Dialog"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"收货地址"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动名称"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label-width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.name"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("autocomplete")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"活动区域"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label-width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"form.region"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"区域一"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"区域二"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("取 消"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("确 定"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("gridData")]),s._v(": [{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'王小虎'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dialogTableVisible")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dialogFormVisible")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("form")]),s._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("formLabelWidth")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'120px'")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n outerVisible: false,\n innerVisible: false\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.outerVisible=!0}}},[s._v("点击打开外层 Dialog")]),a("el-dialog",{attrs:{title:"外层 Dialog",visible:s.outerVisible},on:{"update:visible":function(t){s.outerVisible=t}}},[a("el-dialog",{attrs:{width:"30%",title:"内层 Dialog",visible:s.innerVisible,"append-to-body":""},on:{"update:visible":function(t){s.innerVisible=t}}}),a("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){s.outerVisible=!1}}},[s._v("取 消")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.innerVisible=!0}}},[s._v("打开内层 Dialog")])],1)],1)]],2),a("p",[s._v("正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了"),a("code",[s._v("append-to-body")]),s._v("属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"outerVisible = true"')]),s._v(">")]),s._v("点击打开外层 Dialog"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n \n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"外层 Dialog"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"outerVisible"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"内层 Dialog"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"innerVisible"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("append-to-body")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"outerVisible = false"')]),s._v(">")]),s._v("取 消"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"innerVisible = true"')]),s._v(">")]),s._v("打开内层 Dialog"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("outerVisible")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("innerVisible")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("标题和底部可水平居中")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'点击打开 Dialog\n\n\n 需要注意的是内容是默认不居中的\n \n 取 消\n 确 定\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n centerDialogVisible: false\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.centerDialogVisible=!0}}},[s._v("点击打开 Dialog")]),a("el-dialog",{attrs:{title:"提示",visible:s.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(t){s.centerDialogVisible=t}}},[a("span",[s._v("需要注意的是内容是默认不居中的")]),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){s.centerDialogVisible=!1}}},[s._v("取 消")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.centerDialogVisible=!1}}},[s._v("确 定")])],1)])],1),a("p",[s._v("将"),a("code",[s._v("center")]),s._v("设置为"),a("code",[s._v("true")]),s._v("即可使标题和底部居中。"),a("code",[s._v("center")]),s._v("仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = true"')]),s._v(">")]),s._v("点击打开 Dialog"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"提示"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("需要注意的是内容是默认不居中的"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = false"')]),s._v(">")]),s._v("取 消"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = false"')]),s._v(">")]),s._v("确 定"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("centerDialogVisible")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n }\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),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)},r=[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"dialog-dui-hua-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog-dui-hua-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog 对话框")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("div",{staticClass:"tip"},[t("p",[t("code",{pre:!0},[this._v("before-close")]),this._v(" 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 "),t("code",{pre:!0},[this._v("footer")]),this._v(" 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 "),t("code",{pre:!0},[this._v("before-close")]),this._v(" 的相关逻辑。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"qian-tao-de-dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-de-dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" 嵌套的 Dialog")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 "),t("code",{pre:!0},[this._v("append-to-body")]),this._v(" 属性。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ju-zhong-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中布局")])},function(){var s=this.$createElement,t=this._self._c||s;return t("div",{staticClass:"tip"},[t("p",[this._v("Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 "),t("code",{pre:!0},[this._v("ref")]),this._v(" 获取相应组件，请在 "),t("code",{pre:!0},[this._v("open")]),this._v(" 事件回调中进行。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("如果 "),a("code",{pre:!0},[s._v("visible")]),s._v(" 属性绑定的变量位于 Vuex 的 store 内，那么 "),a("code",{pre:!0},[s._v(".sync")]),s._v(" 不会正常工作。此时需要去除 "),a("code",{pre:!0},[s._v(".sync")]),s._v(" 修饰符，同时监听 Dialog 的 "),a("code",{pre:!0},[s._v("open")]),s._v(" 和 "),a("code",{pre:!0},[s._v("close")]),s._v(" 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 "),a("code",{pre:!0},[s._v("visible")]),s._v(" 属性绑定的变量的值。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("visible")]),a("td",[s._v("是否显示 Dialog，支持 .sync 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),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("width")]),a("td",[s._v("Dialog 的宽度")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("50%")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("是否为全屏 Dialog")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("top")]),a("td",[s._v("Dialog CSS 中的 margin-top 值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("15vh")])]),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("append-to-body")]),a("td",[s._v("Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),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("—")])]),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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._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("open")]),a("td",[s._v("Dialog 打开的回调")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("opened")]),a("td",[s._v("Dialog 打开动画结束时的回调")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("Dialog 关闭的回调")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closed")]),a("td",[s._v("Dialog 关闭动画结束时的回调")]),a("td",[s._v("—")])])])])}];a.d(t,"a",function(){return e}),a.d(t,"b",function(){return r})},function(s,t,a){"use strict";var e=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:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('这是一条消息提示');\n },\n\n openVn() {\n const h = this.$createElement;\n this.$message({\n message: h('p', null, [\n h('span', null, '内容可以是 '),\n h('i', { style: 'color: teal' }, 'VNode')\n ])\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("打开消息提示")]),a("el-button",{attrs:{plain:!0},on:{click:s.openVn}},[s._v("VNode")])]],2),a("p",[s._v("Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个"),a("code",[s._v("$message")]),s._v("方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("打开消息提示"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"openVn"')]),s._v(">")]),s._v("VNode"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是一条消息提示'")]),s._v(");\n },\n\n openVn() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", [\n h("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'span'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'内容可以是 '")]),s._v("),\n h("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'VNode'")]),s._v(")\n ])\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("用来显示「成功、警告、消息、错误」类的操作反馈。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("成功"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("警告"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("消息"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("错误"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是一条消息提示'")]),s._v(");\n },\n open2() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'恭喜你，这是一条成功消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n open3() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'警告哦，这是一条警告消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n open4() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'错了哦，这是一条错误消息'")]),s._v(");\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以添加关闭按钮。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("消息"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("成功"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open7"')]),s._v(">")]),s._v("警告"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open8"')]),s._v(">")]),s._v("错误"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open5() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是一条消息提示'")]),s._v("\n });\n },\n\n open6() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'恭喜你，这是一条成功消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n open7() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'警告哦，这是一条警告消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n open8() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'错了哦，这是一条错误消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'error'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n openCenter() {\n this.$message({\n message: '居中的文字',\n center: true\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.openCenter}},[s._v("文字居中")])]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"openCenter"')]),s._v(">")]),s._v("文字居中"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n openCenter() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'居中的文字'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n openHTML() {\n this.$message({\n dangerouslyUseHTMLString: true,\n message: '这是 HTML 片段'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.openHTML}},[s._v("使用 HTML 片段")])]],2),a("p",[s._v("将"),a("code",[s._v("dangerouslyUseHTMLString")]),s._v("属性设置为 true，"),a("code",[s._v("message")]),s._v(" 就会被当作 HTML 片段处理。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"openHTML"')]),s._v(">")]),s._v("使用 HTML 片段"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n openHTML() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是 HTML 片段'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[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),s._m(17),s._m(18),s._m(19)],1)},r=[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"message-xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message-xiao-xi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message 消息提示")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"bu-tong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同状态")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ke-guan-bi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-guan-bi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可关闭")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"wen-zi-ju-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-ju-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字居中")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("使用 "),t("code",{pre:!0},[this._v("center")]),this._v(" 属性让文字水平居中。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[t("code",{pre:!0},[this._v("message")]),this._v(" 属性支持传入 HTML 片段")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS 攻击")]),s._v("。因此在 "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" 打开的情况下，请确保 "),a("code",{pre:!0},[s._v("message")]),s._v(" 的内容是可信的，"),a("strong",[s._v("永远不要")]),s._v("将用户提交的内容赋值给 "),a("code",{pre:!0},[s._v("message")]),s._v(" 属性。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 "),t("code",{pre:!0},[this._v("Message")]),this._v("。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单独引用")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("单独引入 "),t("code",{pre:!0},[this._v("Message")]),this._v("：")])},function(){var s=this.$createElement,t=this._self._c||s;return t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("import")]),this._v(" { Message } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("from")]),this._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[this._v("'element-ui'")]),this._v(";\n")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("此时调用方法为 "),t("code",{pre:!0},[this._v("Message(options)")]),this._v("。我们也为每个 type 定义了各自的方法，如 "),t("code",{pre:!0},[this._v("Message.success(options)")]),this._v("。并且可以调用 "),t("code",{pre:!0},[this._v("Message.closeAll()")]),this._v(" 手动关闭所有实例。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._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 / 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("info")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("自定义图标的类名，会覆盖 "),a("code",{pre:!0},[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("dangerouslyUseHTMLString")]),a("td",[s._v("是否将 message 属性作为 HTML 片段处理")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),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("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("onClose")]),a("td",[s._v("关闭时的回调函数, 参数为被关闭的 message 实例")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("调用 "),t("code",{pre:!0},[this._v("Message")]),this._v(" 或 "),t("code",{pre:!0},[this._v("this.$message")]),this._v(" 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 "),t("code",{pre:!0},[this._v("close")]),this._v(" 方法。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("关闭当前的 Message")])])])])}];a.d(t,"a",function(){return e}),a.d(t,"b",function(){return r})},function(s,t,a){"use strict";var e=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:'\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('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("\n 可自动关闭\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("\n 不会自动关闭\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'标题名称'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v("}, "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'")]),s._v(")\n });\n },\n\n open2() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'提示'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是一条不会自动关闭的消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("duration")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("\n 成功\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("\n 警告\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("\n 消息\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("\n 错误\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open3() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'成功'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是一条成功的提示消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n open4() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'警告'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是一条警告的提示消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n open5() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.info({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是一条消息的提示消息'")]),s._v("\n });\n },\n\n open6() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.error({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'错误'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是一条错误的提示消息'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以让 Notification 从屏幕四角中的任意一角弹出")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open7() {\n this.$notify({\n title: '自定义位置',\n message: '右上角弹出的消息'\n });\n },\n\n open8() {\n this.$notify({\n title: '自定义位置',\n message: '右下角弹出的消息',\n position: 'bottom-right'\n });\n },\n\n open9() {\n this.$notify({\n title: '自定义位置',\n message: '左下角弹出的消息',\n position: 'bottom-left'\n });\n },\n\n open10() {\n this.$notify({\n title: '自定义位置',\n message: '左上角弹出的消息',\n position: 'top-left'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n 右上角\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open8}},[s._v("\n 右下角\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open9}},[s._v("\n 左下角\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open10}},[s._v("\n 左上角\n ")])]],2),a("p",[s._v("使用"),a("code",[s._v("position")]),s._v("属性定义 Notification 的弹出位置，支持四个选项："),a("code",[s._v("top-right")]),s._v("、"),a("code",[s._v("top-left")]),s._v("、"),a("code",[s._v("bottom-right")]),s._v("、"),a("code",[s._v("bottom-left")]),s._v("，默认为"),a("code",[s._v("top-right")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open7"')]),s._v(">")]),s._v("\n 右上角\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open8"')]),s._v(">")]),s._v("\n 右下角\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open9"')]),s._v(">")]),s._v("\n 左下角\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open10"')]),s._v(">")]),s._v("\n 左上角\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open7() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'自定义位置'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'右上角弹出的消息'")]),s._v("\n });\n },\n\n open8() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'自定义位置'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'右下角弹出的消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'bottom-right'")]),s._v("\n });\n },\n\n open9() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'自定义位置'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'左下角弹出的消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'bottom-left'")]),s._v("\n });\n },\n\n open10() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'自定义位置'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'左上角弹出的消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'top-left'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("让 Notification 偏移一些位置")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open11() {\n this.$notify({\n title: '偏移',\n message: '这是一条带有偏移的提示消息',\n offset: 100\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open11}},[s._v("\n 偏移的消息\n ")])]],2),a("p",[s._v("Notification 提供设置偏移量的功能，通过设置 "),a("code",[s._v("offset")]),s._v(" 字段，可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open11"')]),s._v(">")]),s._v("\n 偏移的消息\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open11() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'偏移'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是一条带有偏移的提示消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("offset")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("100")]),s._v("\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open12() {\n this.$notify({\n title: 'HTML 片段',\n dangerouslyUseHTMLString: true,\n message: '这是 HTML 片段'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open12}},[s._v("\n 使用 HTML 片段\n ")])]],2),a("p",[s._v("将"),a("code",[s._v("dangerouslyUseHTMLString")]),s._v("属性设置为 true，"),a("code",[s._v("message")]),s._v(" 就会被当作 HTML 片段处理。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open12"')]),s._v(">")]),s._v("\n 使用 HTML 片段\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open12() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'HTML 片段'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是 HTML 片段'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("p",[s._v("可以不显示关闭按钮")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open13() {\n this.$notify.success({\n title: 'Info',\n message: '这是一条没有关闭按钮的消息',\n showClose: false\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open13}},[s._v("\n 隐藏关闭按钮\n ")])]],2),a("p",[s._v("将"),a("code",[s._v("showClose")]),s._v("属性设置为"),a("code",[s._v("false")]),s._v("即可隐藏关闭按钮。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"open13"')]),s._v(">")]),s._v("\n 隐藏关闭按钮\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open13() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.success({\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Info'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'这是一条没有关闭按钮的消息'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n });\n }\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),a("p",[s._v("单独引入 Notification：")]),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},r=[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"notification-tong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification-tong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification 通知")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-you-qing-xiang-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-qing-xiang-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有倾向性")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"zi-ding-yi-dan-chu-wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-dan-chu-wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义弹出位置")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-you-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-pian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有偏移")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[t("code",{pre:!0},[this._v("message")]),this._v(" 属性支持传入 HTML 片段")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS 攻击")]),s._v("。因此在 "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" 打开的情况下，请确保 "),a("code",{pre:!0},[s._v("message")]),s._v(" 的内容是可信的，"),a("strong",[s._v("永远不要")]),s._v("将用户提交的内容赋值给 "),a("code",{pre:!0},[s._v("message")]),s._v(" 属性。")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"yin-cang-guan-bi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yin-cang-guan-bi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 隐藏关闭按钮")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("Element 为 "),t("code",{pre:!0},[this._v("Vue.prototype")]),this._v(" 添加了全局方法 "),t("code",{pre:!0},[this._v("$notify")]),this._v("。因此在 vue instance 中可以采用本页面中的方式调用 Notification。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单独引用")])},function(){var s=this.$createElement,t=this._self._c||s;return t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"hljs language-javascript"}},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("import")]),this._v(" { Notification } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[this._v("from")]),this._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[this._v("'element-ui'")]),this._v(";\n")])])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("此时调用方法为 "),t("code",{pre:!0},[this._v("Notification(options)")]),this._v("。我们也为每个 type 定义了各自的方法，如 "),t("code",{pre:!0},[this._v("Notification.success(options)")]),this._v("。并且可以调用 "),t("code",{pre:!0},[this._v("Notification.closeAll()")]),this._v(" 手动关闭所有实例。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._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("dangerouslyUseHTMLString")]),a("td",[s._v("是否将 message 属性作为 HTML 片段处理")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),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",{pre:!0},[s._v("type")]),s._v("，则 "),a("code",{pre:!0},[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("position")]),a("td",[s._v("自定义弹出位置")]),a("td",[s._v("string")]),a("td",[s._v("top-right/top-left/bottom-right/bottom-left")]),a("td",[s._v("top-right")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("是否显示关闭按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),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.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("p",[this._v("调用 "),t("code",{pre:!0},[this._v("Notification")]),this._v(" 或 "),t("code",{pre:!0},[this._v("this.$notify")]),this._v(" 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 "),t("code",{pre:!0},[this._v("close")]),this._v(" 方法。")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("关闭当前的 Notification")])])])])}];a.d(t,"a",function(){return e}),a.d(t,"b",function(){return r})},function(s,t,a){"use strict";var e=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:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-radio",{attrs:{label:"1"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("备选项")]),a("el-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("code",[s._v("Boolean")]),s._v("。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("备选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("备选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("单选框不可用的状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio1: '选中且禁用'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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("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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"禁用"')]),s._v(">")]),s._v("备选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"选中且禁用"')]),s._v(">")]),s._v("备选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio1")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'选中且禁用'")]),s._v("\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("适用于在多个互斥的选项中选择的场景")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio2: 3\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"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",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio2"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("备选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),s._v("备选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(">")]),s._v("备选项"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio2")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("3")]),s._v("\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("按钮样式的单选组合。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio3: '上海',\n radio4: '上海',\n radio5: '上海',\n radio6: '上海'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[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)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:s.radio4,callback:function(t){s.radio4=t},expression:"radio4"}},[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)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.radio5,callback:function(t){s.radio5=t},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"上海"}}),a("el-radio-button",{attrs:{label:"北京",disabled:""}}),a("el-radio-button",{attrs:{label:"广州"}}),a("el-radio-button",{attrs:{label:"深圳"}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:s.radio6,callback:function(t){s.radio6=t},expression:"radio6"}},[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)],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("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio3"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"北京"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"广州"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"深圳"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio4"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海"')]),s._v(" >")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"北京"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"广州"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"深圳"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio5"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"北京"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" >")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"广州"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"深圳"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio6"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"上海"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"北京"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"广州"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"深圳"')]),s._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio3")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio4")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio5")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio6")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'上海'")]),s._v("\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio7: '1',\n radio8: '1',\n radio9: '1',\n radio10: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-radio",{attrs:{label:"1",border:""},model:{value:s.radio7,callback:function(t){s.radio7=t},expression:"radio7"}},[s._v("备选项1")]),a("el-radio",{attrs:{label:"2",border:""},model:{value:s.radio7,callback:function(t){s.radio7=t},expression:"radio7"}},[s._v("备选项2")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:s.radio8,callback:function(t){s.radio8=t},expression:"radio8"}},[s._v("备选项1")]),a("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:s.radio8,callback:function(t){s.radio8=t},expression:"radio8"}},[s._v("备选项2")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.radio9,callback:function(t){s.radio9=t},expression:"radio9"}},[a("el-radio",{attrs:{label:"1",border:""}},[s._v("备选项1")]),a("el-radio",{attrs:{label:"2",border:"",disabled:""}},[s._v("备选项2")])],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:s.radio10,callback:function(t){s.radio10=t},expression:"radio10"}},[a("el-radio",{attrs:{label:"1",border:""}},[s._v("备选项1")]),a("el-radio",{attrs:{label:"2",border:""}},[s._v("备选项2")])],1)],1)]],2),a("p",[s._v("设置"),a("code",[s._v("border")]),s._v("属性可以渲染为带有边框的单选框。")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{pre:!0,attrs:{class:"hljs language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio7"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("备选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio7"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("备选项2"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio8"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("备选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio8"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("备选项2"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio9"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("备选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("备选项2"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"radio10"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("备选项1"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("备选项2"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[s._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio7")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio8")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio9")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("radio10")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[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),s._m(14),s._m(15)],1)},r=[function(){var s=this.$createElement,t=this._self._c||s;return t("h2",{attrs:{id:"radio-dan-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-dan-xuan-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio 单选框")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dan-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan-kuang-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单选框组")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"an-niu-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮样式")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"dai-you-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有边框")])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"radio-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[this._v("¶")]),this._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("value / v-model")]),a("td",[s._v("绑定值")]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),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("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("size")]),a("td",[s._v("Radio 的尺寸，仅在 border 为真时有效")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),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("—")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"radio-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Events")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("绑定值变化时触发的事件")]),t("td",[this._v("选中的 Radio label 值")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"radio-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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 / v-model")]),a("td",[s._v("绑定值")]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),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("text-color")]),a("td",[s._v("按钮形式的 Radio 激活时的文本颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("按钮形式的 Radio 激活时的填充色和边框色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"radio-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Events")])},function(){var s=this.$createElement,t=this._self._c||s;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("绑定值变化时触发的事件")]),t("td",[this._v("选中的 Radio label 值")])])])])},function(){var s=this.$createElement,t=this._self._c||s;return t("h3",{attrs:{id:"radio-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._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")])]),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.d(t,"a",function(){return e}),a.d(t,"b",function(){return r})}])]); \ No newline at end of file diff --git a/2.5/zh-CN.6c21902.css b/2.5/zh-CN.6c21902.css new file mode 100644 index 000000000..5d31b53cc --- /dev/null +++ b/2.5/zh-CN.6c21902.css @@ -0,0 +1,1806 @@ + +.page-changelog { + padding-bottom: 100px; +} +.page-changelog .fr:hover a { + color: #409EFF; +} +.page-changelog .fr { + float: right; + padding: 0; +} +.page-changelog .fr a { + display: block; + padding: 10px 15px; + color: #333; +} +.page-changelog .fr.el-button { + -ms-transform: translateY(-3px); + transform: translateY(-3px); +} +.page-changelog .heading { + font-size: 24px; + margin-bottom: 60px; + color: #333; +} +.page-changelog .timeline { + padding: 0; + padding-bottom: 10px; + position: relative; + color: #5e6d82; +} +.page-changelog .timeline > li { + position: relative; + padding-bottom: 15px; + list-style: none; + line-height: 1.8; + border: 1px solid #ddd; + border-radius: 4px +} +.page-changelog .timeline > li:not(:last-child) { + margin-bottom: 50px; +} +.page-changelog .timeline ul { + padding: 30px 30px 15px; +} +.page-changelog .timeline ul ul { + padding: 0; + padding-top: 5px; + padding-left: 27px; +} +.page-changelog .timeline ul ul li { + padding-left: 0; + color: #555; + word-break: normal; +} +.page-changelog .timeline ul ul li::before { + content: ''; + width: 4px; + height: 4px; + border-radius: 50%; + background-color: #fff; + border: solid 1px #333; + margin-right: -12px; + display: inline-block; + vertical-align: middle; +} +.page-changelog .timeline li li { + font-size: 16px; + list-style: none; + padding-left: 20px; + padding-bottom: 5px; + color: #333; + word-break: break-all +} +.page-changelog .timeline li li:before { + content: ''; + width: 6px; + height: 6px; + border-radius: 50%; + background-color: #333; + -ms-transform: translateX(-20px); + transform: translateX(-20px); + display: inline-block; + vertical-align: middle; +} +.page-changelog .timeline i { + padding: 0 20px; + display: inline-block; +} +.page-changelog .timeline h3 { + margin:0; + padding: 15px 30px; + border-bottom: 1px solid #ddd; + font-size: 20px; + color: #333; + font-weight: 700; +} +.page-changelog .timeline h3 a { + opacity: 1; + font-size: 20px; + float: none; + margin-left: 0; + color: #333; +} +.page-changelog .timeline h4 { + margin: 0; + margin-bottom: -10px; + font-size: 18px; + padding-left: 54px; + padding-top: 30px; + font-weight: 700; +} +.page-changelog .timeline p { + margin: 0; +} +.page-changelog .timeline em { + position: absolute; + right: 30px; + font-style: normal; + top: 23px; + font-size: 16px; + color: #666; +} + + +.page-component__scroll { + height: calc(100% - 80px); + margin-top: 80px; +} +.page-component__scroll .el-scrollbar__wrap { + overflow-x: auto; +} +.page-component { + box-sizing: border-box; + height: 100%; +} +.page-component .page-component__nav { + width: 240px; + position: fixed; + top: 0; + bottom: 0; + margin-top: 80px; + transition: padding-top .3s; +} +.page-component .page-component__nav .el-scrollbar__wrap { + height: 100%; +} +.page-component .page-component__nav.is-extended { + padding-top: 0; +} +.page-component .side-nav { + height: 100%; + padding-top: 50px; + padding-bottom: 50px; + padding-right: 0 +} +.page-component .side-nav > ul { + padding-bottom: 50px; +} +.page-component .page-component__content { + padding-left: 270px; + padding-bottom: 100px; + box-sizing: border-box; +} +.page-component .content { + padding-top: 50px; +} +.page-component .content > h3 { + margin: 55px 0 20px; +} +.page-component .content > table { + border-collapse: collapse; + width: 100%; + background-color: #fff; + font-size: 14px; + margin-bottom: 45px; + line-height: 1.5em; +} +.page-component .content > table strong { + font-weight: 400; +} +.page-component .content > table td, .page-component .content > table th { + border-bottom: 1px solid #dcdfe6; + padding: 15px; + max-width: 250px; +} +.page-component .content > table th { + text-align: left; + white-space: nowrap; + color: #909399; + font-weight: 400; +} +.page-component .content > table td { + color: #606266; +} +.page-component .content > table th:first-child, .page-component .content > table td:first-child { + padding-left: 10px; +} +.page-component .content > ul:not(.timeline) { + margin: 10px 0; + padding: 0 0 0 20px; + font-size: 14px; + color: #5e6d82; + line-height: 2em; +} +.page-component .page-component-up { + background-color: #fff; + position: fixed; + right: 100px; + bottom: 150px; + width: 40px; + height: 40px; + border-radius: 20px; + cursor: pointer; + transition: .3s; + box-shadow: 0 0 6px rgba(0,0,0, .12); + z-index: 5; +} +.page-component .page-component-up i { + color: #409EFF; + display: block; + line-height: 40px; + text-align: center; + font-size: 18px; +} +.page-component .page-component-up.hover { + opacity: 1; +} +.page-component .back-top-fade-enter, .page-component .back-top-fade-leave-active { + -ms-transform: translateY(-30px); + transform: translateY(-30px); + opacity: 0; +} +.page-component.page-container { + padding: 0; +} +@media (max-width: 768px) { +.page-component .page-component__nav { + width: 100%; + position: static; + margin-top: 0; +} +.page-component .side-nav { + padding-top: 0; + padding-left: 50px; +} +.page-component .page-component__content { + padding-left: 10px; + padding-right: 10px; +} +.page-component .content { + padding-top: 0; +} +.page-component .content > table { + overflow: auto; + display: block; +} +.page-component .page-component-up { + display: none; +} +} + + +.cards[data-v-7aed89bc] { + margin: 30px 0 70px; +} +.card[data-v-7aed89bc] { + background: #fbfcfd; + height: 204px; + text-align: center; +} +.card img[data-v-7aed89bc] { + margin: 40px auto 25px; + width: 80px; + height: 80px; +} +.card h4[data-v-7aed89bc] { + font-size: 18px; + color: #1f2d3d; + font-weight: 400; + margin: 0; +} +.card span[data-v-7aed89bc] { + font-size: 14px; + color: #99a9bf; +} + + +.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 .container[data-v-b79c6774]:after { + clear: both; +} +.cards .container[data-v-b79c6774]:before, .cards .container[data-v-b79c6774]:after { + display: table; + content: ""; +} +.banner[data-v-b79c6774] { + text-align: center; +} +.banner-desc[data-v-b79c6774] { + padding-top: 20px; +} +.banner-desc h1[data-v-b79c6774] { + font-size: 34px; + margin: 0; + line-height: 48px; + color: #555; +} +.banner-desc p[data-v-b79c6774] { + font-size: 18px; + line-height: 28px; + color: #888; + margin: 10px 0 5px; +} +.sponsors[data-v-b79c6774] { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; +} +.sponsor[data-v-b79c6774] { + margin: 0 20px 50px; + display: -ms-inline-flexbox; + display: inline-flex; + width: 300px; + height: 100px; + -ms-flex-pack: center; + justify-content: center; +} +.sponsor img[data-v-b79c6774] { + margin-right: 20px; +} +.sponsor div[data-v-b79c6774] { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: center; + justify-content: center; +} +.sponsor p[data-v-b79c6774] { + margin: 0; + line-height: 1.8; + color: #999; + font-size: 14px; +} +.jumbotron[data-v-b79c6774] { + width: 890px; + height: 465px; + margin: 30px auto; + position: relative; +} +.jumbotron div[data-v-b79c6774] { + width: 100%; + height: 100%; + background-color: transparent; + position: absolute; + top: 0; + left: 0; +} +.jumbotron img[data-v-b79c6774] { + position: absolute; +} +.jumbotron .jumbotron-cloud-1[data-v-b79c6774] { + right: 0; + top: 0; + height: 55px; +} +.jumbotron .jumbotron-plant-2[data-v-b79c6774] { + left: 60px; + top: 200px; +} +.jumbotron .jumbotron-web[data-v-b79c6774] { + height: 385px; + top: 35px; + left: 110px; +} +.jumbotron .jumbotron-cloud-2[data-v-b79c6774] { + left: 0; + top: 50px; + height: 55px; +} +.jumbotron .jumbotron-compo-1[data-v-b79c6774] { + left: 94px; + height: 90px; + top: 220px; +} +.jumbotron .jumbotron-compo-2[data-v-b79c6774] { + right: 73px; + top: 60px; + height: 124px; +} +.jumbotron .jumbotron-compo-3[data-v-b79c6774] { + right: 42px; + top: 200px; + height: 120px; +} +.jumbotron .jumbotron-plant-1[data-v-b79c6774] { + bottom: 0; + left: 30px; + height: 185px; +} +.jumbotron .jumbotron-figure-1[data-v-b79c6774] { + bottom: 0; + right: 180px; + height: 140px; +} +.jumbotron .jumbotron-figure-2[data-v-b79c6774] { + bottom: 0; + right: 10px; + height: 68px; +} +.cards[data-v-b79c6774] { + margin: 0 auto 110px; + width: 1140px; +} +.cards .container[data-v-b79c6774] { + padding: 0; + margin: 0 -11px; + width: auto; +} +.cards li[data-v-b79c6774] { + width: 33.33333%; + padding: 0 19px; + box-sizing: border-box; + float: left; + list-style: none; +} +.cards img[data-v-b79c6774] { + width: 160px; + height: 120px; +} +.card[data-v-b79c6774] { + height: 430px; + width: 100%; + background:#ffffff; + 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-b79c6774] { + margin: 66px auto 60px; +} +.card h3[data-v-b79c6774] { + margin: 0; + font-size: 18px; + color: #1f2f3d; + font-weight: 400; +} +.card p[data-v-b79c6774] { + font-size: 14px; + color: #99a9bf; + padding: 0 25px; + line-height: 20px; +} +.card a[data-v-b79c6774] { + height: 53px; + line-height: 52px; + font-size: 14px; + color: #409EFF; + 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-b79c6774]:hover { + color: #fff; + background: #409EFF; +} +.card[data-v-b79c6774]:hover { + bottom: 6px; + box-shadow: 0 6px 18px 0 rgba(232,237,250,0.50); +} +@media (max-width: 1140px) { +.cards[data-v-b79c6774] { + width: 100%; +} +.cards .container[data-v-b79c6774] { + width: 100%; + margin: 0; +} +.banner .container[data-v-b79c6774] { + width: 100%; + box-sizing: border-box; +} +.banner img[data-v-b79c6774] { + right: 0; +} +} +@media (max-width: 1000px) { +.banner .container img[data-v-b79c6774] { + display: none; +} +.jumbotron[data-v-b79c6774] { + display: none; +} +} +@media (max-width: 768px) { +.cards li[data-v-b79c6774] { + width: 80%; + margin: 0 auto 20px; + float: none; +} +.cards .card[data-v-b79c6774] { + height: auto; + padding-bottom: 54px; +} +.banner-stars[data-v-b79c6774] { + display: none; +} +.banner-desc #line2[data-v-b79c6774] { + display: none; +} +.banner-desc h2[data-v-b79c6774] { + font-size: 32px; +} +.banner-desc p[data-v-b79c6774] { + width: auto; +} +} + + +h3[data-v-aadaaa32] { + margin-bottom: 15px; +} +.block[data-v-aadaaa32] { + margin-bottom: 55px; +} +p[data-v-aadaaa32] { + margin: 0 0 15px; +} +.nav-demos p[data-v-aadaaa32] { + margin-bottom: 50px; +} +.nav-demos h5[data-v-aadaaa32] { + margin: 0; +} +.nav-demos img[data-v-aadaaa32] { + padding: 15px; + background-color: #F9FAFC; + width: 100%; + margin-bottom: 15px; + cursor: pointer; +} +.dialog-img[data-v-aadaaa32] { + 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-aadaaa32] { + margin: 0 auto; + position: relative; + top: 100px; + padding-bottom: 50px; +} +.dialog-img img[data-v-aadaaa32] { + display: block; + width: 100%; +} +.mask[data-v-aadaaa32] { + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + background-color: #373737; + background-color: rgba(55, 55, 55, 0.6); + height: 100%; + z-index: 1000; +} +.zoom-enter-active[data-v-aadaaa32], .zoom-leave-active[data-v-aadaaa32] { + transition: transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.zoom-enter[data-v-aadaaa32], .zoom-leave-active[data-v-aadaaa32] { + -ms-transform: scale(0.3); + transform: scale(0.3); + opacity: 0; +} +.fade-enter-active[data-v-aadaaa32], .fade-leave-active[data-v-aadaaa32] { + transition: opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.fade-enter[data-v-aadaaa32], .fade-leave-active[data-v-aadaaa32] { + opacity: 0; +} + +.cards .container[data-v-0e25f6c5]:after { + clear: both; +} +.cards .container[data-v-0e25f6c5]:before, .cards .container[data-v-0e25f6c5]:after { + display: table; + content: ""; +} +.page-resource[data-v-0e25f6c5] { + padding-top: 55px; + box-sizing: border-box; +} +.page-resource .resource-placeholder[data-v-0e25f6c5] { + margin: 50px auto 100px; + text-align: center; +} +.page-resource .resource-placeholder img[data-v-0e25f6c5] { + width: 150px; +} +.page-resource .resource-placeholder h4[data-v-0e25f6c5] { + margin: 20px 0 16px; + font-size: 16px; + color: #1f2f3d; + line-height: 1; +} +.page-resource .resource-placeholder p[data-v-0e25f6c5] { + margin: 0; + font-size: 14px; + color: #99a9bf; + line-height: 1; +} +.cards[data-v-0e25f6c5] { + margin: 35px auto 110px; +} +.cards .container[data-v-0e25f6c5] { + padding: 0; + margin: 0 -11px; + width: auto; +} +.cards li[data-v-0e25f6c5] { + width: 33.33333%; + padding: 0 11px; + box-sizing: border-box; + float: left; + list-style: none; +} +h2[data-v-0e25f6c5] { + font-size: 28px; + margin: 0; +} +p[data-v-0e25f6c5] { + font-size: 14px; + color: #5e6d82; +} +.card[data-v-0e25f6c5] { + height: 394px; + width: 100%; + background:#ffffff; + 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-0e25f6c5] { + margin: 75px auto 35px; + height: 87px; +} +.card h3[data-v-0e25f6c5] { + margin: 0 0 10px; + font-size: 18px; + color: #1f2f3d; + font-weight: 400; + height: 22px; +} +.card p[data-v-0e25f6c5] { + font-size: 14px; + color: #99a9bf; + padding: 0 30px; + margin: 0; + word-break: break-all; + line-height: 1.8; +} +.card a[data-v-0e25f6c5] { + height: 42px; + width: 190px; + display: inline-block; + line-height: 42px; + font-size: 14px; + background-color: #409EFF; + 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-0e25f6c5] { + max-width: 500px; + float: none; + margin: 10px auto 30px; + width: 80%; +} +.cards li .card[data-v-0e25f6c5] { + height: auto; + padding-bottom: 20px; +} +.cards h3[data-v-0e25f6c5] { + height: auto; +} +} + + +.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-a0b77de4]:after { + clear: both; +} +.clearfix[data-v-a0b77de4]:before, .clearfix[data-v-a0b77de4]:after { + display: table; + content: ""; +} +.share-button[data-v-a0b77de4] { + width: 36px; + padding: 10px; +} +.mark[data-v-a0b77de4] { + margin-top: 8px; + line-height: 1; + float: right; +} +.clearfix[data-v-a0b77de4] { +} +.item[data-v-a0b77de4] { + margin-right: 40px; +} + + +.demo-box.demo-button .el-row { + margin-bottom: 20px +} +.demo-box.demo-button .el-row:last-child { + margin-bottom: 0 +} +.demo-box.demo-button .el-button + .el-button { + margin-left: 10px; +} +.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 +} + +.clearfix[data-v-a3800462]:after { + clear: both; +} +.clearfix[data-v-a3800462]:before, .clearfix[data-v-a3800462]:after { + display: table; + content: ""; +} +.text[data-v-a3800462] { + font-size: 14px; +} +.time[data-v-a3800462] { + font-size: 13px; + color: #999; +} +.bottom[data-v-a3800462] { + margin-top: 13px; + line-height: 12px; +} +.item[data-v-a3800462] { + margin-bottom: 18px; +} +.button[data-v-a3800462] { + padding: 0; + float: right; +} +.image[data-v-a3800462] { + width: 100%; + display: block; +} +.clearfix[data-v-a3800462] { +} +.box-card[data-v-a3800462] { + width: 480px; +} + +.demo-carousel .el-carousel__item:nth-child(2n+1) { + background-color: #d3dce6 +} +.demo-carousel .block { + padding: 30px; + text-align: center; + border-right: solid 1px #EFF2F6; + display: inline-block; + 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 .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: solid 1px #EFF2F6; + display: inline-block; + 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-collapse .el-collapse-item__header .header-icon { + margin-left: 5px; +} + + +.demo-color-picker .block { + padding: 30px 0; + text-align: center; + border-right: solid 1px #EFF2F6; + display: inline-block; + 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-picker .el-color-picker + .el-color-picker { + margin-left: 20px; +} + + +.demo-color-box { + border-radius: 4px; + padding: 20px; + margin: 5px 0; + height: 74px; + box-sizing: border-box; + color: #fff; + font-size: 14px +} +.demo-color-box .value { + font-size: 12px; + opacity: 0.69; + line-height: 24px +} +.demo-color-box-group .demo-color-box { + border-radius: 0; + margin: 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 { + background-color: #409EFF; +} +.bg-success { + background-color: #67C23A; +} +.bg-warning { + background-color: #E6A23C; +} +.bg-danger { + background-color: #F56C6C; +} +.bg-info { + background-color: #909399; +} +.bg-text-primary { + background-color: #303133; +} +.bg-text-regular { + background-color: #606266; +} +.bg-text-secondary { + background-color: #909399; +} +.bg-text-placeholder { + background-color: #c0c4cc; +} +.bg-border-base { + background-color: #dcdfe6; +} +.bg-border-light { + background-color: #e4e7ed; +} +.bg-border-lighter { + background-color: #ebeef5; +} +.bg-border-extra-light { + background-color: #f2f6fc; +} +[class*=" bg-border-"] { + color: #303133; +} + +#chang-jian-ye-mian-bu-ju + .demo-container > .source > .el-container:nth-child(7) .el-aside { + line-height: 320px; +} +.el-header, .el-footer { + background-color: #B3C0D1; + color: #333; + line-height: 60px; +} +.el-aside { + color: #333; +} +#chang-jian-ye-mian-bu-ju + .demo-container .el-header, #chang-jian-ye-mian-bu-ju + .demo-container .el-footer { + text-align: center; +} +#chang-jian-ye-mian-bu-ju + .demo-container .el-aside { + background-color: #D3DCE6; + text-align: center; + line-height: 200px; +} +#chang-jian-ye-mian-bu-ju + .demo-container .el-main { + background-color: #E9EEF3; + color: #333; + text-align: center; + line-height: 160px; +} +#chang-jian-ye-mian-bu-ju + .demo-container > .source > .el-container { + margin-bottom: 40px; +} +#chang-jian-ye-mian-bu-ju + .demo-container > .source > .el-container:nth-child(5) .el-aside, #chang-jian-ye-mian-bu-ju + .demo-container > .source > .el-container:nth-child(6) .el-aside { + line-height: 260px; +} + + +.demo-block.demo-date-picker .source { + padding: 0; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.demo-date-picker .block { + padding: 30px 0; + text-align: center; + border-right: solid 1px #EFF2F6; + -ms-flex: 1; + flex: 1 +} +.demo-date-picker .block:last-child { + border-right: none; +} +.demo-date-picker .container { + -ms-flex: 1; + flex: 1; + border-right: solid 1px #EFF2F6; +} +.demo-date-picker .container .block { + border-right: none +} +.demo-date-picker .container .block:last-child { + border-top: solid 1px #EFF2F6; +} +.demo-date-picker .container: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: solid 1px #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-select { + width: 300px; +} +.demo-box.demo-dialog .el-input { + 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: #409EFF; +} +.demo-box .el-icon-arrow-down { + 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; +} + + +.el-dropdown-link { + cursor: pointer; + color: #409EFF; +} +.el-icon-arrow-down { + font-size: 12px; +} + + +.el-dropdown-link { + cursor: pointer; + color: #409EFF; +} +.el-icon-arrow-down { + font-size: 12px; +} +.demonstration { + display: block; + color: #8492a6; + font-size: 14px; + margin-bottom: 20px; +} + + +.demo-form.demo-zh-CN .el-checkbox-group:after { + clear: both; + visibility: hidden; + font-size: 0; + height: 0; +} +.demo-form.demo-zh-CN .el-select .el-input { + width: 380px; +} +.demo-form.demo-zh-CN .el-form { + width: 460px; +} +.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 .demo-form-normal { + width: 460px; +} +.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 { + color: #606266; + margin: 0 20px; + font-size: 1.5em; + vertical-align: middle; +} +.demo-icon .source > button { + margin: 0 20px; +} +.page-component .content > ul.icon-list { + overflow: hidden; + list-style: none; + padding: 0; + border: solid 1px #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: 32px; + margin-bottom: 15px; + color: #606266; +} +.icon-list li .icon-name { + display: inline-block; + padding: 0 3px; + height: 1em; + color: #606266; +} +.icon-list li:hover { + color: rgb(92, 182, 255); +} + + +.demo-box.demo-input-number .el-input-number + .el-input-number { + margin-left: 10px; +} + + +.demo-input.demo-zh-CN .el-select .el-input { + width: 130px; +} +.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 .input-with-select .el-input-group__prepend { + background-color: #fff; +} +.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,0.50); +} +.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-input-suffix { + margin-bottom: 15px; +} +.demo-input-suffix .el-input { + margin-right: 15px; +} + + +.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:not(.el-menu--collapse) { + width: 240px; + 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: solid 1px #EFF2F6; + display: inline-block; + 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: solid 1px #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: solid 1px #EFF2F6; + display: inline-block; + 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: solid 1px #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 .warning-row { + background: oldlace; +} +.el-table .success-row { + background: #f0f9eb; +} +.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: 32px; + line-height: 30px; + padding-top: 0; + padding-bottom: 0; +} +.demo-box.demo-tag .input-new-tag { + width: 90px; + margin-left: 10px; + vertical-align: bottom; +} + + +.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: 15px; + padding: 6px 5px; +} + + +.transition-box { + margin-bottom: 10px; + width: 200px; + height: 100px; + border-radius: 4px; + background-color: #409EFF; + 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 { + margin-top: 20px; +} +.demo-tree .filter-tree { + margin-top: 20px; +} +.demo-tree .custom-tree-container { + display: -ms-flexbox; + display: flex; + margin: -24px; +} +.demo-tree .block { + -ms-flex: 1; + flex: 1; + padding: 8px 24px 24px; +} +.demo-tree .block > p { + text-align: center; + margin: 0; + line-height: 4; +} +.demo-tree .block:first-child { + border-right: solid 1px #eff2f6; +} +.demo-tree .custom-tree-node { + -ms-flex: 1; + flex: 1; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: justify; + justify-content: space-between; + font-size: 14px; + padding-right: 8px; +} + + +.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, .demo-box .avatar-uploader .el-upload:focus { + border-color: #409EFF; +} +.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; +} + diff --git a/docs.005603c.js b/docs.005603c.js new file mode 100644 index 000000000..c1af7bb7b --- /dev/null +++ b/docs.005603c.js @@ -0,0 +1,57 @@ +!function(e){function t(t){for(var n,i,o=t[0],s=t[1],a=0,l=[];a-1}function f(e,t){if(e){for(var n=e.className,i=(t||"").split(" "),r=0,o=i.length;r=0&&Math.floor(t)===t&&isFinite(e)}function p(e){return null==e?"":"object"==typeof e?JSON.stringify(e,null,2):String(e)}function f(e){var t=parseFloat(e);return isNaN(t)?e:t}function m(e,t){for(var n=Object.create(null),i=e.split(","),r=0;r-1)return e.splice(n,1)}}var y=Object.prototype.hasOwnProperty;function b(e,t){return y.call(e,t)}function M(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}var w=/-(\w)/g,C=M(function(e){return e.replace(w,function(e,t){return t?t.toUpperCase():""})}),x=M(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}),N=/\B([A-Z])/g,D=M(function(e){return e.replace(N,"-$1").toLowerCase()});var _=Function.prototype.bind?function(e,t){return e.bind(t)}:function(e,t){function n(n){var i=arguments.length;return i?i>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n};function I(e,t){t=t||0;for(var n=e.length-t,i=new Array(n);n--;)i[n]=e[n+t];return i}function k(e,t){for(var n in t)e[n]=t[n];return e}function j(e){for(var t={},n=0;n0,Z=W&&W.indexOf("edge/")>0,K=(W&&W.indexOf("android"),W&&/iphone|ipad|ipod|ios/.test(W)||"ios"===H),J=(W&&/chrome\/\d+/.test(W),{}.watch),X=!1;if(Q)try{var ee={};Object.defineProperty(ee,"passive",{get:function(){X=!0}}),window.addEventListener("test-passive",null,ee)}catch(e){}var te=function(){return void 0===R&&(R=!Q&&!V&&void 0!==e&&(e.process&&"server"===e.process.env.VUE_ENV)),R},ne=Q&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function ie(e){return"function"==typeof e&&/native code/.test(e.toString())}var re,oe="undefined"!=typeof Symbol&&ie(Symbol)&&"undefined"!=typeof Reflect&&ie(Reflect.ownKeys);re="undefined"!=typeof Set&&ie(Set)?Set:function(){function e(){this.set=Object.create(null)}return e.prototype.has=function(e){return!0===this.set[e]},e.prototype.add=function(e){this.set[e]=!0},e.prototype.clear=function(){this.set=Object.create(null)},e}();var se=T,ae=0,le=function(){this.id=ae++,this.subs=[]};le.prototype.addSub=function(e){this.subs.push(e)},le.prototype.removeSub=function(e){v(this.subs,e)},le.prototype.depend=function(){le.target&&le.target.addDep(this)},le.prototype.notify=function(){var e=this.subs.slice();for(var t=0,n=e.length;t-1)if(o&&!b(r,"default"))s=!1;else if(""===s||s===D(e)){var l=Pe(String,r.type);(l<0||a0&&(at((u=e(u,(n||"")+"_"+l))[0])&&at(h)&&(i[c]=me(h.text+u[0].text),u.shift()),i.push.apply(i,u)):a(u)?at(h)?i[c]=me(h.text+u):""!==u&&i.push(me(u)):at(u)&&at(h)?i[c]=me(h.text+u.text):(s(t._isVList)&&o(u.tag)&&r(u.key)&&o(n)&&(u.key="__vlist"+n+"_"+l+"__"),i.push(u)));return i}(e):void 0}function at(e){return o(e)&&o(e.text)&&!1===e.isComment}function lt(e,t){return(e.__esModule||oe&&"Module"===e[Symbol.toStringTag])&&(e=e.default),l(e)?t.extend(e):e}function ut(e){return e.isComment&&e.asyncFactory}function ct(e){if(Array.isArray(e))for(var t=0;tkt&&xt[n].id>e.id;)n--;xt.splice(n+1,0,e)}else xt.push(e);_t||(_t=!0,Ke(jt))}}(this)},St.prototype.run=function(){if(this.active){var e=this.get();if(e!==this.value||l(e)||this.deep){var t=this.value;if(this.value=e,this.user)try{this.cb.call(this.vm,e,t)}catch(e){Fe(e,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,e,t)}}},St.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},St.prototype.depend=function(){for(var e=this.deps.length;e--;)this.deps[e].depend()},St.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||v(this.vm._watchers,this);for(var e=this.deps.length;e--;)this.deps[e].removeSub(this);this.active=!1}};var Lt={enumerable:!0,configurable:!0,get:T,set:T};function Ot(e,t,n){Lt.get=function(){return this[t][n]},Lt.set=function(e){this[t][n]=e},Object.defineProperty(e,n,Lt)}function At(e){e._watchers=[];var t=e.$options;t.props&&function(e,t){var n=e.$options.propsData||{},i=e._props={},r=e.$options._propKeys=[];e.$parent&&we(!1);var o=function(o){r.push(o);var s=Ee(o,t,n,e);Ne(i,o,s),o in e||Ot(e,"_props",o)};for(var s in t)o(s);we(!0)}(e,t.props),t.methods&&function(e,t){e.$options.props;for(var n in t)e[n]="function"!=typeof t[n]?T:_(t[n],e)}(e,t.methods),t.data?function(e){var t=e.$options.data;c(t=e._data="function"==typeof t?function(e,t){ce();try{return e.call(t,t)}catch(e){return Fe(e,t,"data()"),{}}finally{he()}}(t,e):t||{})||(t={});var n=Object.keys(t),i=e.$options.props,r=(e.$options.methods,n.length);for(;r--;){var o=n[r];0,i&&b(i,o)||(s=void 0,36!==(s=(o+"").charCodeAt(0))&&95!==s&&Ot(e,"_data",o))}var s;xe(t,!0)}(e):xe(e._data={},!0),t.computed&&function(e,t){var n=e._computedWatchers=Object.create(null),i=te();for(var r in t){var o=t[r],s="function"==typeof o?o:o.get;0,i||(n[r]=new St(e,s||T,T,Et)),r in e||zt(e,r,o)}}(e,t.computed),t.watch&&t.watch!==J&&function(e,t){for(var n in t){var i=t[n];if(Array.isArray(i))for(var r=0;r-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!h(e)&&e.test(t)}function gn(e,t){var n=e.cache,i=e.keys,r=e._vnode;for(var o in n){var s=n[o];if(s){var a=fn(s.componentOptions);a&&!t(a)&&vn(n,o,i,r)}}}function vn(e,t,n,i){var r=e[t];!r||i&&r.tag===i.tag||r.componentInstance.$destroy(),e[t]=null,v(n,t)}!function(e){e.prototype._init=function(e){var t=this;t._uid=cn++,t._isVue=!0,e&&e._isComponent?function(e,t){var n=e.$options=Object.create(e.constructor.options),i=t._parentVnode;n.parent=t.parent,n._parentVnode=i;var r=i.componentOptions;n.propsData=r.propsData,n._parentListeners=r.listeners,n._renderChildren=r.children,n._componentTag=r.tag,t.render&&(n.render=t.render,n.staticRenderFns=t.staticRenderFns)}(t,e):t.$options=Oe(hn(t.constructor),e||{},t),t._renderProxy=t,t._self=t,function(e){var t=e.$options,n=t.parent;if(n&&!t.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={},e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}(t),function(e){e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&ft(e,t)}(t),function(e){e._vnode=null,e._staticTrees=null;var t=e.$options,n=e.$vnode=t._parentVnode,r=n&&n.context;e.$slots=mt(t._renderChildren,r),e.$scopedSlots=i,e._c=function(t,n,i,r){return un(e,t,n,i,r,!1)},e.$createElement=function(t,n,i,r){return un(e,t,n,i,r,!0)};var o=n&&n.data;Ne(e,"$attrs",o&&o.attrs||i,null,!0),Ne(e,"$listeners",t._parentListeners||i,null,!0)}(t),Ct(t,"beforeCreate"),function(e){var t=Ut(e.$options.inject,e);t&&(we(!1),Object.keys(t).forEach(function(n){Ne(e,n,t[n])}),we(!0))}(t),At(t),function(e){var t=e.$options.provide;t&&(e._provided="function"==typeof t?t.call(e):t)}(t),Ct(t,"created"),t.$options.el&&t.$mount(t.$options.el)}}(dn),function(e){var t={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(e.prototype,"$data",t),Object.defineProperty(e.prototype,"$props",n),e.prototype.$set=De,e.prototype.$delete=_e,e.prototype.$watch=function(e,t,n){if(c(t))return Ft(this,e,t,n);(n=n||{}).user=!0;var i=new St(this,e,t,n);if(n.immediate)try{t.call(this,i.value)}catch(e){Fe(e,this,'callback for immediate watcher "'+i.expression+'"')}return function(){i.teardown()}}}(dn),function(e){var t=/^hook:/;e.prototype.$on=function(e,n){var i=this;if(Array.isArray(e))for(var r=0,o=e.length;r1?I(t):t;for(var n=I(arguments,1),i=0,r=t.length;iparseInt(this.max)&&vn(s,a[0],a,this._vnode)),t.data.keepAlive=!0}return t||e&&e[0]}}};!function(e){var t={get:function(){return F}};Object.defineProperty(e,"config",t),e.util={warn:se,extend:k,mergeOptions:Oe,defineReactive:Ne},e.set=De,e.delete=_e,e.nextTick=Ke,e.options=Object.create(null),$.forEach(function(t){e.options[t+"s"]=Object.create(null)}),e.options._base=e,k(e.options.components,bn),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=I(arguments,1);return n.unshift(this),"function"==typeof e.install?e.install.apply(e,n):"function"==typeof e&&e.apply(null,n),t.push(e),this}}(e),function(e){e.mixin=function(e){return this.options=Oe(this.options,e),this}}(e),pn(e),function(e){$.forEach(function(t){e[t]=function(e,n){return n?("component"===t&&c(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&"function"==typeof n&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}})}(e)}(dn),Object.defineProperty(dn.prototype,"$isServer",{get:te}),Object.defineProperty(dn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(dn,"FunctionalRenderContext",{value:Xt}),dn.version="2.5.22";var Mn=m("style,class"),wn=m("input,textarea,option,select,progress"),Cn=m("contenteditable,draggable,spellcheck"),xn=m("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),Nn="http://www.w3.org/1999/xlink",Dn=function(e){return":"===e.charAt(5)&&"xlink"===e.slice(0,5)},_n=function(e){return Dn(e)?e.slice(6,e.length):""},In=function(e){return null==e||!1===e};function kn(e){for(var t=e.data,n=e,i=e;o(i.componentInstance);)(i=i.componentInstance._vnode)&&i.data&&(t=jn(i.data,t));for(;o(n=n.parent);)n&&n.data&&(t=jn(t,n.data));return function(e,t){if(o(e)||o(t))return Tn(e,Sn(t));return""}(t.staticClass,t.class)}function jn(e,t){return{staticClass:Tn(e.staticClass,t.staticClass),class:o(e.class)?[e.class,t.class]:t.class}}function Tn(e,t){return e?t?e+" "+t:e:t||""}function Sn(e){return Array.isArray(e)?function(e){for(var t,n="",i=0,r=e.length;i-1?ei(e,t,n):xn(t)?In(n)?e.removeAttribute(t):(n="allowfullscreen"===t&&"EMBED"===e.tagName?"true":t,e.setAttribute(t,n)):Cn(t)?e.setAttribute(t,In(n)||"false"===n?"false":"true"):Dn(t)?In(n)?e.removeAttributeNS(Nn,_n(t)):e.setAttributeNS(Nn,t,n):ei(e,t,n)}function ei(e,t,n){if(In(n))e.removeAttribute(t);else{if(G&&!q&&("TEXTAREA"===e.tagName||"INPUT"===e.tagName)&&"placeholder"===t&&!e.__ieph){var i=function(t){t.stopImmediatePropagation(),e.removeEventListener("input",i)};e.addEventListener("input",i),e.__ieph=!0}e.setAttribute(t,n)}}var ti={create:Jn,update:Jn};function ni(e,t){var n=t.elm,i=t.data,s=e.data;if(!(r(i.staticClass)&&r(i.class)&&(r(s)||r(s.staticClass)&&r(s.class)))){var a=kn(t),l=n._transitionClasses;o(l)&&(a=Tn(a,Sn(l))),a!==n._prevClass&&(n.setAttribute("class",a),n._prevClass=a)}}var ii,ri={create:ni,update:ni},oi="__r",si="__c";function ai(e,t,n){var i=ii;return function r(){null!==t.apply(null,arguments)&&ui(e,r,n,i)}}function li(e,t,n,i){var r;t=(r=t)._withTask||(r._withTask=function(){We=!0;try{return r.apply(null,arguments)}finally{We=!1}}),ii.addEventListener(e,t,X?{capture:n,passive:i}:n)}function ui(e,t,n,i){(i||ii).removeEventListener(e,t._withTask||t,n)}function ci(e,t){if(!r(e.data.on)||!r(t.data.on)){var n=t.data.on||{},i=e.data.on||{};ii=t.elm,function(e){if(o(e[oi])){var t=G?"change":"input";e[t]=[].concat(e[oi],e[t]||[]),delete e[oi]}o(e[si])&&(e.change=[].concat(e[si],e.change||[]),delete e[si])}(n),it(n,i,li,ui,ai,t.context),ii=void 0}}var hi={create:ci,update:ci};function di(e,t){if(!r(e.data.domProps)||!r(t.data.domProps)){var n,i,s=t.elm,a=e.data.domProps||{},l=t.data.domProps||{};for(n in o(l.__ob__)&&(l=t.data.domProps=k({},l)),a)r(l[n])&&(s[n]="");for(n in l){if(i=l[n],"textContent"===n||"innerHTML"===n){if(t.children&&(t.children.length=0),i===a[n])continue;1===s.childNodes.length&&s.removeChild(s.childNodes[0])}if("value"===n){s._value=i;var u=r(i)?"":String(i);pi(s,u)&&(s.value=u)}else s[n]=i}}}function pi(e,t){return!e.composing&&("OPTION"===e.tagName||function(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}(e,t)||function(e,t){var n=e.value,i=e._vModifiers;if(o(i)){if(i.lazy)return!1;if(i.number)return f(n)!==f(t);if(i.trim)return n.trim()!==t.trim()}return n!==t}(e,t))}var fi={create:di,update:di},mi=M(function(e){var t={},n=/:(.+)/;return e.split(/;(?![^(]*\))/g).forEach(function(e){if(e){var i=e.split(n);i.length>1&&(t[i[0].trim()]=i[1].trim())}}),t});function gi(e){var t=vi(e.style);return e.staticStyle?k(e.staticStyle,t):t}function vi(e){return Array.isArray(e)?j(e):"string"==typeof e?mi(e):e}var yi,bi=/^--/,Mi=/\s*!important$/,wi=function(e,t,n){if(bi.test(t))e.style.setProperty(t,n);else if(Mi.test(n))e.style.setProperty(t,n.replace(Mi,""),"important");else{var i=xi(t);if(Array.isArray(n))for(var r=0,o=n.length;r-1?t.split(_i).forEach(function(t){return e.classList.add(t)}):e.classList.add(t);else{var n=" "+(e.getAttribute("class")||"")+" ";n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function ki(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(_i).forEach(function(t){return e.classList.remove(t)}):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var n=" "+(e.getAttribute("class")||"")+" ",i=" "+t+" ";n.indexOf(i)>=0;)n=n.replace(i," ");(n=n.trim())?e.setAttribute("class",n):e.removeAttribute("class")}}function ji(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&k(t,Ti(e.name||"v")),k(t,e),t}return"string"==typeof e?Ti(e):void 0}}var Ti=M(function(e){return{enterClass:e+"-enter",enterToClass:e+"-enter-to",enterActiveClass:e+"-enter-active",leaveClass:e+"-leave",leaveToClass:e+"-leave-to",leaveActiveClass:e+"-leave-active"}}),Si=Q&&!q,Li="transition",Oi="animation",Ai="transition",Ei="transitionend",zi="animation",$i="animationend";Si&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(Ai="WebkitTransition",Ei="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(zi="WebkitAnimation",$i="webkitAnimationEnd"));var Pi=Q?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(e){return e()};function Fi(e){Pi(function(){Pi(e)})}function Ui(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),Ii(e,t))}function Yi(e,t){e._transitionClasses&&v(e._transitionClasses,t),ki(e,t)}function Ri(e,t,n){var i=Qi(e,t),r=i.type,o=i.timeout,s=i.propCount;if(!r)return n();var a=r===Li?Ei:$i,l=0,u=function(){e.removeEventListener(a,c),n()},c=function(t){t.target===e&&++l>=s&&u()};setTimeout(function(){l0&&(n=Li,c=s,h=o.length):t===Oi?u>0&&(n=Oi,c=u,h=l.length):h=(n=(c=Math.max(s,u))>0?s>u?Li:Oi:null)?n===Li?o.length:l.length:0,{type:n,timeout:c,propCount:h,hasTransform:n===Li&&Bi.test(i[Ai+"Property"])}}function Vi(e,t){for(;e.length1}function Ki(e,t){!0!==t.data.show&&Wi(t)}var Ji=function(e){var t,n,i={},l=e.modules,u=e.nodeOps;for(t=0;tf?b(e,r(n[v+1])?null:n[v+1].elm,n,p,v,i):p>v&&w(0,t,d,f)}(d,m,v,n,c):o(v)?(o(e.text)&&u.setTextContent(d,""),b(d,null,v,0,v.length-1,n)):o(m)?w(0,m,0,m.length-1):o(e.text)&&u.setTextContent(d,""):e.text!==t.text&&u.setTextContent(d,t.text),o(f)&&o(p=f.hook)&&o(p=p.postpatch)&&p(e,t)}}}function D(e,t,n){if(s(n)&&o(e.parent))e.parent.data.pendingInsert=t;else for(var i=0;i-1,s.selected!==o&&(s.selected=o);else if(O(ir(s),i))return void(e.selectedIndex!==a&&(e.selectedIndex=a));r||(e.selectedIndex=-1)}}function nr(e,t){return t.every(function(t){return!O(t,e)})}function ir(e){return"_value"in e?e._value:e.value}function rr(e){e.target.composing=!0}function or(e){e.target.composing&&(e.target.composing=!1,sr(e.target,"input"))}function sr(e,t){var n=document.createEvent("HTMLEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function ar(e){return!e.componentInstance||e.data&&e.data.transition?e:ar(e.componentInstance._vnode)}var lr={model:Xi,show:{bind:function(e,t,n){var i=t.value,r=(n=ar(n)).data&&n.data.transition,o=e.__vOriginalDisplay="none"===e.style.display?"":e.style.display;i&&r?(n.data.show=!0,Wi(n,function(){e.style.display=o})):e.style.display=i?o:"none"},update:function(e,t,n){var i=t.value;!i!=!t.oldValue&&((n=ar(n)).data&&n.data.transition?(n.data.show=!0,i?Wi(n,function(){e.style.display=e.__vOriginalDisplay}):Gi(n,function(){e.style.display="none"})):e.style.display=i?e.__vOriginalDisplay:"none")},unbind:function(e,t,n,i,r){r||(e.style.display=e.__vOriginalDisplay)}}},ur={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function cr(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?cr(ct(t.children)):e}function hr(e){var t={},n=e.$options;for(var i in n.propsData)t[i]=e[i];var r=n._parentListeners;for(var o in r)t[C(o)]=r[o];return t}function dr(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}var pr=function(e){return e.tag||ut(e)},fr=function(e){return"show"===e.name},mr={name:"transition",props:ur,abstract:!0,render:function(e){var t=this,n=this.$slots.default;if(n&&(n=n.filter(pr)).length){0;var i=this.mode;0;var r=n[0];if(function(e){for(;e=e.parent;)if(e.data.transition)return!0}(this.$vnode))return r;var o=cr(r);if(!o)return r;if(this._leaving)return dr(e,r);var s="__transition-"+this._uid+"-";o.key=null==o.key?o.isComment?s+"comment":s+o.tag:a(o.key)?0===String(o.key).indexOf(s)?o.key:s+o.key:o.key;var l=(o.data||(o.data={})).transition=hr(this),u=this._vnode,c=cr(u);if(o.data.directives&&o.data.directives.some(fr)&&(o.data.show=!0),c&&c.data&&!function(e,t){return t.key===e.key&&t.tag===e.tag}(o,c)&&!ut(c)&&(!c.componentInstance||!c.componentInstance._vnode.isComment)){var h=c.data.transition=k({},l);if("out-in"===i)return this._leaving=!0,rt(h,"afterLeave",function(){t._leaving=!1,t.$forceUpdate()}),dr(e,r);if("in-out"===i){if(ut(o))return u;var d,p=function(){d()};rt(l,"afterEnter",p),rt(l,"enterCancelled",p),rt(h,"delayLeave",function(e){d=e})}}return r}}},gr=k({tag:String,moveClass:String},ur);function vr(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function yr(e){e.data.newPos=e.elm.getBoundingClientRect()}function br(e){var t=e.data.pos,n=e.data.newPos,i=t.left-n.left,r=t.top-n.top;if(i||r){e.data.moved=!0;var o=e.elm.style;o.transform=o.WebkitTransform="translate("+i+"px,"+r+"px)",o.transitionDuration="0s"}}delete gr.mode;var Mr={Transition:mr,TransitionGroup:{props:gr,beforeMount:function(){var e=this,t=this._update;this._update=function(n,i){var r=bt(e);e.__patch__(e._vnode,e.kept,!1,!0),e._vnode=e.kept,r(),t.call(e,n,i)}},render:function(e){for(var t=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),i=this.prevChildren=this.children,r=this.$slots.default||[],o=this.children=[],s=hr(this),a=0;a-1?zn[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:zn[e]=/HTMLUnknownElement/.test(t.toString())},k(dn.options.directives,lr),k(dn.options.components,Mr),dn.prototype.__patch__=Q?Ji:T,dn.prototype.$mount=function(e,t){return function(e,t,n){var i;return e.$el=t,e.$options.render||(e.$options.render=fe),Ct(e,"beforeMount"),i=function(){e._update(e._render(),n)},new St(e,i,T,{before:function(){e._isMounted&&!e._isDestroyed&&Ct(e,"beforeUpdate")}},!0),n=!1,null==e.$vnode&&(e._isMounted=!0,Ct(e,"mounted")),e}(this,e=e&&Q?function(e){if("string"==typeof e){var t=document.querySelector(e);return t||document.createElement("div")}return e}(e):void 0,t)},Q&&setTimeout(function(){F.devtools&&ne&&ne.emit("init",dn)},0),t.a=dn}).call(this,n(16),n(74).setImmediate)},function(e,t,n){"use strict";n.d(t,"k",function(){return o}),n.d(t,"h",function(){return s}),n.d(t,"l",function(){return l}),n.d(t,"g",function(){return u}),n.d(t,"f",function(){return c}),n.d(t,"e",function(){return h}),n.d(t,"m",function(){return d}),n.d(t,"d",function(){return p}),n.d(t,"b",function(){return f}),n.d(t,"a",function(){return m}),n.d(t,"c",function(){return g}),n.d(t,"j",function(){return v}),n.d(t,"i",function(){return y});var i=n(2),r=Object.prototype.hasOwnProperty;function o(){}function s(e,t){return r.call(e,t)}function a(e,t){for(var n in t)e[n]=t[n];return e}function l(e){for(var t={},n=0;n0&&void 0!==arguments[0]?arguments[0]:"";return String(e).replace(/[|\\{}()[\]^$+*?.]/g,"\\$&")},f=function(e,t){for(var n=0;n!==e.length;++n)if(t(e[n]))return n;return-1},m=function(e,t){var n=f(e,t);return-1!==n?e[n]:void 0},g=function(e){return Array.isArray(e)?e:e?[e]:[]},v=function(){return!i.a.prototype.$isServer&&!isNaN(Number(document.documentMode))},y=function(){return!i.a.prototype.$isServer&&navigator.userAgent.indexOf("Edge")>-1}},function(e,t,n){"use strict";var i=n(44),r=n(2),o=n(60),s=n.n(o),a=n(3),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},u=/(%|)\{([0-9a-zA-Z_]+)\}/g;n.d(t,"b",function(){return f}),n.d(t,"c",function(){return m});var c=function(e){return function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),i=1;ii&&(n=i)),n!==r&&this.$emit("change",n)}},onMouseenter:function(e){this.disabled||("left"===e?this.quickprevIconClass="el-icon-d-arrow-left":this.quicknextIconClass="el-icon-d-arrow-right")}},computed:{pagers:function(){var e=this.pagerCount,t=(e-1)/2,n=Number(this.currentPage),i=Number(this.pageCount),r=!1,o=!1;i>e&&(n>e-t&&(r=!0),n0?n("li",{staticClass:"number",class:{active:1===e.currentPage,disabled:e.disabled}},[e._v("1")]):e._e(),e.showPrevMore?n("li",{staticClass:"el-icon more btn-quickprev",class:[e.quickprevIconClass,{disabled:e.disabled}],on:{mouseenter:function(t){e.onMouseenter("left")},mouseleave:function(t){e.quickprevIconClass="el-icon-more"}}}):e._e(),e._l(e.pagers,function(t){return n("li",{key:t,staticClass:"number",class:{active:e.currentPage===t,disabled:e.disabled}},[e._v(e._s(t))])}),e.showNextMore?n("li",{staticClass:"el-icon more btn-quicknext",class:[e.quicknextIconClass,{disabled:e.disabled}],on:{mouseenter:function(t){e.onMouseenter("right")},mouseleave:function(t){e.quicknextIconClass="el-icon-more"}}}):e._e(),e.pageCount>1?n("li",{staticClass:"number",class:{active:e.currentPage===e.pageCount,disabled:e.disabled}},[e._v(e._s(e.pageCount))]):e._e()],2)},[],!1,null,null,null);o.options.__file="pager.vue";var s=o.exports;var a={methods:{dispatch:function(e,t,n){for(var i=this.$parent||this.$root,r=i.$options.componentName;i&&(!r||r!==e);)(i=i.$parent)&&(r=i.$options.componentName);i&&i.$emit.apply(i,[t].concat(n))},broadcast:function(e,t,n){(function e(t,n,i){this.$children.forEach(function(r){r.$options.componentName===t?r.$emit.apply(r,[n].concat(i)):e.apply(r,[t,n].concat([i]))})}).call(this,e,t,n)}}},l=function(e){return{methods:{focus:function(){this.$refs[e].focus()}}}},u=n(4),c={methods:{t:function(){for(var e=arguments.length,t=Array(e),n=0;n1&&void 0!==arguments[1]?arguments[1]:1,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;d||(d=document.createElement("textarea"),document.body.appendChild(d));var i=function(e){var t=window.getComputedStyle(e),n=t.getPropertyValue("box-sizing"),i=parseFloat(t.getPropertyValue("padding-bottom"))+parseFloat(t.getPropertyValue("padding-top")),r=parseFloat(t.getPropertyValue("border-bottom-width"))+parseFloat(t.getPropertyValue("border-top-width"));return{contextStyle:f.map(function(e){return e+":"+t.getPropertyValue(e)}).join(";"),paddingSize:i,borderSize:r,boxSizing:n}}(e),r=i.paddingSize,o=i.borderSize,s=i.boxSizing,a=i.contextStyle;d.setAttribute("style",a+";"+p),d.value=e.value||e.placeholder||"";var l=d.scrollHeight,u={};"border-box"===s?l+=o:"content-box"===s&&(l-=r),d.value="";var c=d.scrollHeight-r;if(null!==t){var h=c*t;"border-box"===s&&(h=h+r+o),l=Math.max(h,l),u.minHeight=h+"px"}if(null!==n){var m=c*n;"border-box"===s&&(m=m+r+o),l=Math.min(m,l)}return u.height=l+"px",d.parentNode&&d.parentNode.removeChild(d),d=null,u}var g=function(e){for(var t=1,n=arguments.length;t0){var i=t[t.length-1];if(i.id===e){if(i.modalClass)i.modalClass.trim().split(/\s+/).forEach(function(e){return Object(C.g)(n,e)});t.pop(),t.length>0&&(n.style.zIndex=t[t.length-1].zIndex)}else for(var r=t.length-1;r>=0;r--)if(t[r].id===e){t.splice(r,1);break}}0===t.length&&(this.modalFade&&Object(C.a)(n,"v-modal-leave"),setTimeout(function(){0===t.length&&(n.parentNode&&n.parentNode.removeChild(n),n.style.display="none",k.modalDom=void 0),Object(C.g)(n,"v-modal-leave")},200))}};Object.defineProperty(k,"zIndex",{configurable:!0,get:function(){return N||(D=(w.a.prototype.$ELEMENT||{}).zIndex||D,N=!0),D},set:function(e){D=e}});w.a.prototype.$isServer||window.addEventListener("keydown",function(e){if(27===e.keyCode){var t=function(){if(!w.a.prototype.$isServer&&k.modalStack.length>0){var e=k.modalStack[k.modalStack.length-1];if(!e)return;return k.getInstance(e.id)}}();t&&t.closeOnPressEscape&&(t.handleClose?t.handleClose():t.handleAction?t.handleAction("cancel"):t.close())}});var j=k,T=void 0,S=function(){if(w.a.prototype.$isServer)return 0;if(void 0!==T)return T;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 n=document.createElement("div");n.style.width="100%",e.appendChild(n);var i=n.offsetWidth;return e.parentNode.removeChild(e),T=t-i},L=1,O=void 0,A={props:{visible:{type:Boolean,default:!1},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}},beforeMount:function(){this._popupId="popup-"+L++,j.register(this._popupId,this)},beforeDestroy:function(){j.deregister(this._popupId),j.closeModal(this._popupId),this.restoreBodyStyle()},data:function(){return{opened:!1,bodyPaddingRight:null,computedBodyPaddingRight:0,withoutHiddenClass:!0,rendered:!1}},watch:{visible:function(e){var t=this;if(e){if(this._opening)return;this.rendered?this.open():(this.rendered=!0,w.a.nextTick(function(){t.open()}))}else this.close()}},methods:{open:function(e){var t=this;this.rendered||(this.rendered=!0);var n=g({},this.$props||this,e);this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),clearTimeout(this._openTimer);var i=Number(n.openDelay);i>0?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(n)},i):this.doOpen(n)},doOpen:function(e){if(!this.$isServer&&(!this.willOpen||this.willOpen())&&!this.opened){this._opening=!0;var t=function e(t){return 3===t.nodeType&&e(t=t.nextElementSibling||t.nextSibling),t}(this.$el),n=e.modal,i=e.zIndex;if(i&&(j.zIndex=i),n&&(this._closing&&(j.closeModal(this._popupId),this._closing=!1),j.openModal(this._popupId,j.nextZIndex(),this.modalAppendToBody?void 0:t,e.modalClass,e.modalFade),e.lockScroll)){this.withoutHiddenClass=!Object(C.c)(document.body,"el-popup-parent--hidden"),this.withoutHiddenClass&&(this.bodyPaddingRight=document.body.style.paddingRight,this.computedBodyPaddingRight=parseInt(Object(C.b)(document.body,"paddingRight"),10)),O=S();var r=document.documentElement.clientHeight0&&(r||"scroll"===o)&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.computedBodyPaddingRight+O+"px"),Object(C.a)(document.body,"el-popup-parent--hidden")}"static"===getComputedStyle(t).position&&(t.style.position="absolute"),t.style.zIndex=j.nextZIndex(),this.opened=!0,this.onOpen&&this.onOpen(),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(){this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose()},doAfterClose:function(){j.closeModal(this._popupId),this._closing=!1},restoreBodyStyle:function(){this.modal&&this.withoutHiddenClass&&(document.body.style.paddingRight=this.bodyPaddingRight,Object(C.g)(document.body,"el-popup-parent--hidden")),this.withoutHiddenClass=!0}}},E=w.a.prototype.$isServer?function(){}:n(76),z=function(e){return e.stopPropagation()},$={props:{transformOrigin:{type:[Boolean,String],default:!0},placement:{type:String,default:"bottom"},boundariesPadding:{type:Number,default:5},reference:{},popper:{},offset:{default:0},value:Boolean,visibleArrow:Boolean,arrowOffset:{type:Number,default:35},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){this.disabled||(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,n=this.popperElm=this.popperElm||this.popper||this.$refs.popper,i=this.referenceElm=this.referenceElm||this.reference||this.$refs.reference;!i&&this.$slots.reference&&this.$slots.reference[0]&&(i=this.referenceElm=this.$slots.reference[0].elm),n&&i&&(this.visibleArrow&&this.appendArrow(n),this.appendToBody&&document.body.appendChild(this.popperElm),this.popperJS&&this.popperJS.destroy&&this.popperJS.destroy(),t.placement=this.currentPlacement,t.offset=this.offset,t.arrowOffset=this.arrowOffset,this.popperJS=new E(i,n,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=j.nextZIndex(),this.popperElm.addEventListener("click",z))}},updatePopper:function(){var e=this.popperJS;e?(e.update(),e._popper&&(e._popper.style.zIndex=j.nextZIndex())):this.createPopper()},doDestroy:function(e){!this.popperJS||this.showPopper&&!e||(this.popperJS.destroy(),this.popperJS=null)},destroyPopper:function(){this.popperJS&&this.resetTransformOrigin()},resetTransformOrigin:function(){if(this.transformOrigin){var e=this.popperJS._popper.getAttribute("x-placement").split("-")[0],t={top:"bottom",bottom:"top",left:"right",right:"left"}[e];this.popperJS._popper.style.transformOrigin="string"==typeof this.transformOrigin?this.transformOrigin:["top","bottom"].indexOf(e)>-1?"center "+t:t+" center"}},appendArrow:function(e){var t=void 0;if(!this.appended){for(var n in this.appended=!0,e.attributes)if(/^_v-/.test(e.attributes[n].name)){t=e.attributes[n].name;break}var i=document.createElement("div");t&&i.setAttribute(t,""),i.setAttribute("x-arrow",""),i.className="popper__arrow",e.appendChild(i)}}},beforeDestroy:function(){this.doDestroy(!0),this.popperElm&&this.popperElm.parentNode===document.body&&(this.popperElm.removeEventListener("click",z),document.body.removeChild(this.popperElm))},deactivated:function(){this.$options.beforeDestroy[0].call(this)}},P={name:"ElSelectDropdown",componentName:"ElSelectDropdown",mixins:[$],props:{placement:{default:"bottom-start"},boundariesPadding:{default:0},popperOptions:{default:function(){return{gpuAcceleration:!1}}},visibleArrow:{default:!0},appendToBody:{type:Boolean,default:!0}},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(){var e=this;this.referenceElm=this.$parent.$refs.reference.$el,this.$parent.popperElm=this.popperElm=this.$el,this.$on("updatePopper",function(){e.$parent.visible&&e.updatePopper()}),this.$on("destroyPopper",this.destroyPopper)}},F=Object(r.a)(P,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-select-dropdown el-popper",class:[{"is-multiple":this.$parent.multiple},this.popperClass],style:{minWidth:this.minWidth}},[this._t("default")],2)},[],!1,null,null,null);F.options.__file="select-dropdown.vue";var U=F.exports,Y=n(3),R="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},B={mixins:[a],name:"ElOption",componentName:"ElOption",inject:["select"],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,hover:!1}},computed:{isObject:function(){return"[object object]"===Object.prototype.toString.call(this.value).toLowerCase()},currentLabel:function(){return this.label||(this.isObject?"":this.value)},currentValue:function(){return this.value||this.label||""},itemSelected:function(){return this.select.multiple?this.contains(this.select.value,this.value):this.isEqual(this.value,this.select.value)},limitReached:function(){return!!this.select.multiple&&(!this.itemSelected&&(this.select.value||[]).length>=this.select.multipleLimit&&this.select.multipleLimit>0)}},watch:{currentLabel:function(){this.created||this.select.remote||this.dispatch("ElSelect","setSelected")},value:function(e,t){var n=this.select,i=n.remote,r=n.valueKey;if(!this.created&&!i){if(r&&"object"===(void 0===e?"undefined":R(e))&&"object"===(void 0===t?"undefined":R(t))&&e[r]===t[r])return;this.dispatch("ElSelect","setSelected")}}},methods:{isEqual:function(e,t){if(this.isObject){var n=this.select.valueKey;return Object(Y.g)(e,n)===Object(Y.g)(t,n)}return e===t},contains:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1];if(this.isObject){var n=this.select.valueKey;return e.some(function(e){return Object(Y.g)(e,n)===Object(Y.g)(t,n)})}return e.indexOf(t)>-1},handleGroupDisabled:function(e){this.groupDisabled=e},hoverItem:function(){this.disabled||this.groupDisabled||(this.select.hoverIndex=this.select.options.indexOf(this))},selectOptionClick:function(){!0!==this.disabled&&!0!==this.groupDisabled&&this.dispatch("ElSelect","handleOptionClick",[this,!0])},queryChange:function(e){this.visible=new RegExp(Object(Y.d)(e),"i").test(this.currentLabel)||this.created,this.visible||this.select.filteredOptionsCount--}},created:function(){this.select.options.push(this),this.select.cachedOptions.push(this),this.select.optionsCount++,this.select.filteredOptionsCount++,this.$on("queryChange",this.queryChange),this.$on("handleGroupDisabled",this.handleGroupDisabled)},beforeDestroy:function(){this.select.onOptionDestroy(this.select.options.indexOf(this))}},Q=Object(r.a)(B,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("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.hover},on:{mouseenter:e.hoverItem,click:function(t){return t.stopPropagation(),e.selectOptionClick(t)}}},[e._t("default",[n("span",[e._v(e._s(e.currentLabel))])])],2)},[],!1,null,null,null);Q.options.__file="option.vue";var V=Q.exports,H={name:"ElTag",props:{text:String,closable:Boolean,type:String,hit:Boolean,disableTransitions:Boolean,color:String,size:String},methods:{handleClose:function(e){e.stopPropagation(),this.$emit("close",e)},handleClick:function(e){e.stopPropagation(),this.$emit("click",e)}},computed:{tagSize:function(){return this.size||(this.$ELEMENT||{}).size}},render:function(e){var t=e("span",{class:["el-tag",this.type?"el-tag--"+this.type:"",this.tagSize?"el-tag--"+this.tagSize:"",{"is-hit":this.hit}],style:{backgroundColor:this.color},on:{click:this.handleClick}},[this.$slots.default,this.closable&&e("i",{class:"el-tag__close el-icon-close",on:{click:this.handleClose}})]);return this.disableTransitions?t:e("transition",{attrs:{name:"el-zoom-in-center"}},[t])}},W=Object(r.a)(H,void 0,void 0,!1,null,null,null);W.options.__file="tag.vue";var G=W.exports;G.install=function(e){e.component(G.name,G)};var q=G,Z=n(61),K="undefined"==typeof window,J=function(e){var t=e,n=Array.isArray(t),i=0;for(t=n?t:t[Symbol.iterator]();;){var r;if(n){if(i>=t.length)break;r=t[i++]}else{if((i=t.next()).done)break;r=i.value}var o=r.target.__resizeListeners__||[];o.length&&o.forEach(function(e){e()})}},X=function(e,t){K||(e.__resizeListeners__||(e.__resizeListeners__=[],e.__ro__=new Z.a(J),e.__ro__.observe(e)),e.__resizeListeners__.push(t))},ee=function(e,t){e&&e.__resizeListeners__&&(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||e.__ro__.disconnect())},te={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 ne(e){var t=e.move,n=e.size,i=e.bar,r={},o="translate"+i.axis+"("+t+"%)";return r[i.size]=n,r.transform=o,r.msTransform=o,r.webkitTransform=o,r}var ie={name:"Bar",props:{vertical:Boolean,size:String,move:Number},computed:{bar:function(){return te[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap}},render:function(e){var t=this.size,n=this.move,i=this.bar;return e("div",{class:["el-scrollbar__bar","is-"+i.key],on:{mousedown:this.clickTrackHandler}},[e("div",{ref:"thumb",class:"el-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:ne({size:t,move:n,bar:i})})])},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=100*(Math.abs(e.target.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-this.$refs.thumb[this.bar.offset]/2)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=t*this.wrap[this.bar.scrollSize]/100},startDrag:function(e){e.stopImmediatePropagation(),this.cursorDown=!0,Object(C.e)(document,"mousemove",this.mouseMoveDocumentHandler),Object(C.e)(document,"mouseup",this.mouseUpDocumentHandler),document.onselectstart=function(){return!1}},mouseMoveDocumentHandler:function(e){if(!1!==this.cursorDown){var t=this[this.bar.axis];if(t){var n=100*(-1*(this.$el.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])-(this.$refs.thumb[this.bar.offset]-t))/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=n*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(e){this.cursorDown=!1,this[this.bar.axis]=0,Object(C.d)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){Object(C.d)(document,"mouseup",this.mouseUpDocumentHandler)}},re={name:"ElScrollbar",components:{Bar:ie},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=S(),n=this.wrapStyle;if(t){var i="-"+t+"px",r="margin-bottom: "+i+"; margin-right: "+i+";";Array.isArray(this.wrapStyle)?(n=Object(Y.l)(this.wrapStyle)).marginRight=n.marginBottom=i:"string"==typeof this.wrapStyle?n+=r:n=r}var o=e(this.tag,{class:["el-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),s=e("div",{ref:"wrap",style:n,on:{scroll:this.handleScroll},class:[this.wrapClass,"el-scrollbar__wrap",t?"":"el-scrollbar__wrap--hidden-default"]},[[o]]),a=void 0;return a=this.native?[e("div",{ref:"wrap",class:[this.wrapClass,"el-scrollbar__wrap"],style:n},[[o]])]:[s,e(ie,{attrs:{move:this.moveX,size:this.sizeWidth}}),e(ie,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight}})],e("div",{class:"el-scrollbar"},a)},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,t,n=this.wrap;n&&(e=100*n.clientHeight/n.scrollHeight,t=100*n.clientWidth/n.scrollWidth,this.sizeHeight=e<100?e+"%":"",this.sizeWidth=t<100?t+"%":"")}},mounted:function(){this.native||(this.$nextTick(this.update),!this.noresize&&X(this.$refs.resize,this.update))},beforeDestroy:function(){this.native||!this.noresize&&ee(this.$refs.resize,this.update)},install:function(e){e.component(re.name,re)}},oe=re,se=n(5),ae=n.n(se),le=[],ue="@@clickoutsideContext",ce=void 0,he=0;function de(e,t,n){return function(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!(n&&n.context&&i.target&&r.target)||e.contains(i.target)||e.contains(r.target)||e===i.target||n.context.popperElm&&(n.context.popperElm.contains(i.target)||n.context.popperElm.contains(r.target))||(t.expression&&e[ue].methodName&&n.context[e[ue].methodName]?n.context[e[ue].methodName]():e[ue].bindingFn&&e[ue].bindingFn())}}!w.a.prototype.$isServer&&Object(C.e)(document,"mousedown",function(e){return ce=e}),!w.a.prototype.$isServer&&Object(C.e)(document,"mouseup",function(e){le.forEach(function(t){return t[ue].documentHandler(e,ce)})});var pe={bind:function(e,t,n){le.push(e);var i=he++;e[ue]={id:i,documentHandler:de(e,t,n),methodName:t.expression,bindingFn:t.value}},update:function(e,t,n){e[ue].documentHandler=de(e,t,n),e[ue].methodName=t.expression,e[ue].bindingFn=t.value},unbind:function(e){for(var t=le.length,n=0;na&&(e.scrollTop=o-e.clientHeight)}else e.scrollTop=0}var me={mixins:[a,c,l("reference"),{data:function(){return{hoverOption:-1}},computed:{optionsAllDisabled:function(){return this.options.filter(function(e){return e.visible}).every(function(e){return e.disabled})}},watch:{hoverIndex:function(e){var t=this;"number"==typeof e&&e>-1&&(this.hoverOption=this.options[e]||{}),this.options.forEach(function(e){e.hover=t.hoverOption===e})}},methods:{navigateOptions:function(e){var t=this;if(this.visible){if(0!==this.options.length&&0!==this.filteredOptionsCount&&!this.optionsAllDisabled){"next"===e?(this.hoverIndex++,this.hoverIndex===this.options.length&&(this.hoverIndex=0)):"prev"===e&&(this.hoverIndex--,this.hoverIndex<0&&(this.hoverIndex=this.options.length-1));var n=this.options[this.hoverIndex];!0!==n.disabled&&!0!==n.groupDisabled&&n.visible||this.navigateOptions(e),this.$nextTick(function(){return t.scrollToOption(t.hoverOption)})}}else this.visible=!0}}}],name:"ElSelect",componentName:"ElSelect",inject:{elForm:{default:""},elFormItem:{default:""}},provide:function(){return{select:this}},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},readonly:function(){return!this.filterable||this.multiple||!Object(Y.j)()&&!Object(Y.i)()&&!this.visible},showClose:function(){var e=this.multiple?Array.isArray(this.value)&&this.value.length>0:void 0!==this.value&&null!==this.value&&""!==this.value;return this.clearable&&!this.selectDisabled&&this.inputHovering&&e},iconClass:function(){return this.remote&&this.filterable?"":this.visible?"arrow-up is-reverse":"arrow-up"},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.query&&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},selectSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},selectDisabled:function(){return this.disabled||(this.elForm||{}).disabled},collapseTagSize:function(){return["small","mini"].indexOf(this.selectSize)>-1?"mini":"small"}},components:{ElInput:M,ElSelectMenu:U,ElOption:V,ElTag:q,ElScrollbar:oe},directives:{Clickoutside:pe},props:{name:String,id:String,value:{required:!0},autocomplete:{type:String,default:"off"},autoComplete:{type:String,validator:function(e){return!0}},automaticDropdown:Boolean,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 Object(u.b)("el.select.placeholder")}},defaultFirstOption:Boolean,reserveKeyword:Boolean,valueKey:{type:String,default:"value"},collapseTags:Boolean,popperAppendToBody:{type:Boolean,default:!0}},data:function(){return{options:[],cachedOptions:[],createdLabel:null,createdSelected:!1,selected:this.multiple?[]:{},inputLength:20,inputWidth:0,initialInputHeight:0,cachedPlaceHolder:"",optionsCount:0,filteredOptionsCount:0,visible:!1,softFocus:!1,selectedLabel:"",hoverIndex:-1,query:"",previousQuery:null,inputHovering:!1,currentPlaceholder:"",menuVisibleOnFocus:!1,isOnComposition:!1,isSilentBlur:!1}},watch:{selectDisabled:function(){var e=this;this.$nextTick(function(){e.resetInputHeight()})},placeholder:function(e){this.cachedPlaceHolder=this.currentPlaceholder=e},value:function(e,t){this.multiple&&(this.resetInputHeight(),e.length>0||this.$refs.input&&""!==this.query?this.currentPlaceholder="":this.currentPlaceholder=this.cachedPlaceHolder,this.filterable&&!this.reserveKeyword&&(this.query="",this.handleQueryChange(this.query))),this.setSelected(),this.filterable&&!this.multiple&&(this.inputLength=20),Object(Y.m)(e,t)||this.dispatch("ElFormItem","el.form.change",e)},visible:function(e){var t=this;e?(this.broadcast("ElSelectDropdown","updatePopper"),this.filterable&&(this.query=this.remote?"":this.selectedLabel,this.handleQueryChange(this.query),this.multiple?this.$refs.input.focus():(this.remote||(this.broadcast("ElOption","queryChange",""),this.broadcast("ElOptionGroup","queryChange")),this.broadcast("ElInput","inputSelect")))):(this.broadcast("ElSelectDropdown","destroyPopper"),this.$refs.input&&this.$refs.input.blur(),this.query="",this.previousQuery=null,this.selectedLabel="",this.inputLength=20,this.menuVisibleOnFocus=!1,this.resetHoverIndex(),this.$nextTick(function(){t.$refs.input&&""===t.$refs.input.value&&0===t.selected.length&&(t.currentPlaceholder=t.cachedPlaceHolder)}),this.multiple||this.selected&&(this.filterable&&this.allowCreate&&this.createdSelected&&this.createdLabel?this.selectedLabel=this.createdLabel:this.selectedLabel=this.selected.currentLabel,this.filterable&&(this.query=this.selectedLabel))),this.$emit("visible-change",e)},options:function(){var e=this;if(!this.$isServer){this.$nextTick(function(){e.broadcast("ElSelectDropdown","updatePopper")}),this.multiple&&this.resetInputHeight();var t=this.$el.querySelectorAll("input");-1===[].indexOf.call(t,document.activeElement)&&this.setSelected(),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}}},methods:{handleComposition:function(e){var t=e.target.value;if("compositionend"===e.type)this.isOnComposition=!1,this.handleQueryChange(t);else{var n=t[t.length-1]||"";this.isOnComposition=!function(e){return/([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(e)}(n)}},handleQueryChange:function(e){var t=this;if(this.previousQuery!==e&&!this.isOnComposition)if(null!==this.previousQuery||"function"!=typeof this.filterMethod&&"function"!=typeof this.remoteMethod){if(this.previousQuery=e,this.$nextTick(function(){t.visible&&t.broadcast("ElSelectDropdown","updatePopper")}),this.hoverIndex=-1,this.multiple&&this.filterable){var n=15*this.$refs.input.value.length+20;this.inputLength=this.collapseTags?Math.min(50,n):n,this.managePlaceholder(),this.resetInputHeight()}this.remote&&"function"==typeof this.remoteMethod?(this.hoverIndex=-1,this.remoteMethod(e)):"function"==typeof this.filterMethod?(this.filterMethod(e),this.broadcast("ElOptionGroup","queryChange")):(this.filteredOptionsCount=this.optionsCount,this.broadcast("ElOption","queryChange",e),this.broadcast("ElOptionGroup","queryChange")),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}else this.previousQuery=e},scrollToOption:function(e){var t=Array.isArray(e)&&e[0]?e[0].$el:e.$el;this.$refs.popper&&t&&fe(this.$refs.popper.$el.querySelector(".el-select-dropdown__wrap"),t);this.$refs.scrollbar&&this.$refs.scrollbar.handleScroll()},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.scrollToOption(e.selected)})},emitChange:function(e){Object(Y.m)(this.value,e)||this.$emit("change",e)},getOption:function(e){for(var t=void 0,n="[object object]"===Object.prototype.toString.call(e).toLowerCase(),i="[object null]"===Object.prototype.toString.call(e).toLowerCase(),r=this.cachedOptions.length-1;r>=0;r--){var o=this.cachedOptions[r];if(n?Object(Y.g)(o.value,this.valueKey)===Object(Y.g)(e,this.valueKey):o.value===e){t=o;break}}if(t)return t;var s={value:e,currentLabel:n||i?"":e};return this.multiple&&(s.hitState=!1),s},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 n=[];Array.isArray(this.value)&&this.value.forEach(function(t){n.push(e.getOption(t))}),this.selected=n,this.$nextTick(function(){e.resetInputHeight()})},handleFocus:function(e){this.softFocus?this.softFocus=!1:((this.automaticDropdown||this.filterable)&&(this.visible=!0,this.menuVisibleOnFocus=!0),this.$emit("focus",e))},blur:function(){this.visible=!1,this.$refs.reference.blur()},handleBlur:function(e){var t=this;setTimeout(function(){t.isSilentBlur?t.isSilentBlur=!1:t.$emit("blur",e)},50),this.softFocus=!1},handleClearClick:function(e){this.deleteSelected(e)},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!0===e||!1===e?(t.hitState=e,e):(t.hitState=!t.hitState,t.hitState)}},deletePrevTag:function(e){if(e.target.value.length<=0&&!this.toggleLastOptionHitState()){var t=this.value.slice();t.pop(),this.$emit("input",t),this.emitChange(t)}},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.collapseTags&&!this.filterable||this.$nextTick(function(){if(e.$refs.reference){var t=e.$refs.reference.$el.childNodes,n=[].filter.call(t,function(e){return"INPUT"===e.tagName})[0],i=e.$refs.tags,r=e.initialInputHeight||40;n.style.height=0===e.selected.length?r+"px":Math.max(i?i.clientHeight+(i.clientHeight>r?6:0):0,r)+"px",e.visible&&!1!==e.emptyText&&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,t){var n=this;if(this.multiple){var i=this.value.slice(),r=this.getValueIndex(i,e.value);r>-1?i.splice(r,1):(this.multipleLimit<=0||i.length0&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1];if("[object object]"===Object.prototype.toString.call(t).toLowerCase()){var n=this.valueKey,i=-1;return e.some(function(e,r){return Object(Y.g)(e,n)===Object(Y.g)(t,n)&&(i=r,!0)}),i}return e.indexOf(t)},toggleMenu:function(){this.selectDisabled||(this.menuVisibleOnFocus?this.menuVisibleOnFocus=!1:this.visible=!this.visible,this.visible&&(this.$refs.input||this.$refs.reference).focus())},selectOption:function(){this.visible?this.options[this.hoverIndex]&&this.handleOptionSelect(this.options[this.hoverIndex]):this.toggleMenu()},deleteSelected:function(e){e.stopPropagation();var t=this.multiple?[]:"";this.$emit("input",t),this.emitChange(t),this.visible=!1,this.$emit("clear")},deleteTag:function(e,t){var n=this.selected.indexOf(t);if(n>-1&&!this.selectDisabled){var i=this.value.slice();i.splice(n,1),this.$emit("input",i),this.emitChange(i),this.$emit("remove-tag",t.value)}e.stopPropagation()},onInputChange:function(){this.filterable&&this.query!==this.selectedLabel&&(this.query=this.selectedLabel,this.handleQueryChange(this.query))},onOptionDestroy:function(e){e>-1&&(this.optionsCount--,this.filteredOptionsCount--,this.options.splice(e,1))},resetInputWidth:function(){this.inputWidth=this.$refs.reference.$el.getBoundingClientRect().width},handleResize:function(){this.resetInputWidth(),this.multiple&&this.resetInputHeight()},checkDefaultFirstOption:function(){this.hoverIndex=-1;for(var e=!1,t=this.options.length-1;t>=0;t--)if(this.options[t].created){e=!0,this.hoverIndex=t;break}if(!e)for(var n=0;n!==this.options.length;++n){var i=this.options[n];if(this.query){if(!i.disabled&&!i.groupDisabled&&i.visible){this.hoverIndex=n;break}}else if(i.itemSelected){this.hoverIndex=n;break}}},getValueKey:function(e){return"[object object]"!==Object.prototype.toString.call(e.value).toLowerCase()?e.value:Object(Y.g)(e.value,this.valueKey)}},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.debouncedOnInputChange=ae()(this.debounce,function(){e.onInputChange()}),this.debouncedQueryChange=ae()(this.debounce,function(t){e.handleQueryChange(t.target.value)}),this.$on("handleOptionClick",this.handleOptionSelect),this.$on("setSelected",this.setSelected)},mounted:function(){var e=this;this.multiple&&Array.isArray(this.value)&&this.value.length>0&&(this.currentPlaceholder=""),X(this.$el,this.handleResize);var t=this.$refs.reference;if(t&&t.$el){this.initialInputHeight=t.$el.getBoundingClientRect().height||{medium:36,small:32,mini:28}[this.selectSize]}this.remote&&this.multiple&&this.resetInputHeight(),this.$nextTick(function(){t&&t.$el&&(e.inputWidth=t.$el.getBoundingClientRect().width)}),this.setSelected()},beforeDestroy:function(){this.$el&&this.handleResize&&ee(this.$el,this.handleResize)}},ge=Object(r.a)(me,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClose,expression:"handleClose"}],staticClass:"el-select",class:[e.selectSize?"el-select--"+e.selectSize:""],on:{click:function(t){return t.stopPropagation(),e.toggleMenu(t)}}},[e.multiple?n("div",{ref:"tags",staticClass:"el-select__tags",style:{"max-width":e.inputWidth-32+"px",width:"100%"}},[e.collapseTags&&e.selected.length?n("span",[n("el-tag",{attrs:{closable:!e.selectDisabled,size:e.collapseTagSize,hit:e.selected[0].hitState,type:"info","disable-transitions":""},on:{close:function(t){e.deleteTag(t,e.selected[0])}}},[n("span",{staticClass:"el-select__tags-text"},[e._v(e._s(e.selected[0].currentLabel))])]),e.selected.length>1?n("el-tag",{attrs:{closable:!1,size:e.collapseTagSize,type:"info","disable-transitions":""}},[n("span",{staticClass:"el-select__tags-text"},[e._v("+ "+e._s(e.selected.length-1))])]):e._e()],1):e._e(),e.collapseTags?e._e():n("transition-group",{on:{"after-leave":e.resetInputHeight}},e._l(e.selected,function(t){return n("el-tag",{key:e.getValueKey(t),attrs:{closable:!e.selectDisabled,size:e.collapseTagSize,hit:t.hitState,type:"info","disable-transitions":""},on:{close:function(n){e.deleteTag(n,t)}}},[n("span",{staticClass:"el-select__tags-text"},[e._v(e._s(t.currentLabel))])])}),1),e.filterable?n("input",{directives:[{name:"model",rawName:"v-model",value:e.query,expression:"query"}],ref:"input",staticClass:"el-select__input",class:[e.selectSize?"is-"+e.selectSize:""],style:{"flex-grow":"1",width:e.inputLength/(e.inputWidth-32)+"%","max-width":e.inputWidth-42+"px"},attrs:{type:"text",disabled:e.selectDisabled,autocomplete:e.autoComplete||e.autocomplete},domProps:{value:e.query},on:{focus:e.handleFocus,blur:function(t){e.softFocus=!1},click:function(e){e.stopPropagation()},keyup:e.managePlaceholder,keydown:[e.resetInputState,function(t){if(!("button"in t)&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"]))return null;t.preventDefault(),e.navigateOptions("next")},function(t){if(!("button"in t)&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"]))return null;t.preventDefault(),e.navigateOptions("prev")},function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?(t.preventDefault(),e.selectOption(t)):null},function(t){if(!("button"in t)&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"]))return null;t.stopPropagation(),t.preventDefault(),e.visible=!1},function(t){return"button"in t||!e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?e.deletePrevTag(t):null}],compositionstart:e.handleComposition,compositionupdate:e.handleComposition,compositionend:e.handleComposition,input:[function(t){t.target.composing||(e.query=t.target.value)},e.debouncedQueryChange]}}):e._e()],1):e._e(),n("el-input",{ref:"reference",class:{"is-focus":e.visible},attrs:{type:"text",placeholder:e.currentPlaceholder,name:e.name,id:e.id,autocomplete:e.autoComplete||e.autocomplete,size:e.selectSize,disabled:e.selectDisabled,readonly:e.readonly,"validate-event":!1},on:{focus:e.handleFocus,blur:e.handleBlur},nativeOn:{keyup:function(t){return e.debouncedOnInputChange(t)},keydown:[function(t){if(!("button"in t)&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"]))return null;t.stopPropagation(),t.preventDefault(),e.navigateOptions("next")},function(t){if(!("button"in t)&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"]))return null;t.stopPropagation(),t.preventDefault(),e.navigateOptions("prev")},function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?(t.preventDefault(),e.selectOption(t)):null},function(t){if(!("button"in t)&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"]))return null;t.stopPropagation(),t.preventDefault(),e.visible=!1},function(t){if(!("button"in t)&&e._k(t.keyCode,"tab",9,t.key,"Tab"))return null;e.visible=!1}],paste:function(t){return 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"}},[e.$slots.prefix?n("template",{slot:"prefix"},[e._t("prefix")],2):e._e(),n("template",{slot:"suffix"},[n("i",{directives:[{name:"show",rawName:"v-show",value:!e.showClose,expression:"!showClose"}],class:["el-select__caret","el-input__icon","el-icon-"+e.iconClass]}),e.showClose?n("i",{staticClass:"el-select__caret el-input__icon el-icon-circle-close",on:{click:e.handleClearClick}}):e._e()])],2),n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":e.handleMenuEnter,"after-leave":e.doDestroy}},[n("el-select-menu",{directives:[{name:"show",rawName:"v-show",value:e.visible&&!1!==e.emptyText,expression:"visible && emptyText !== false"}],ref:"popper",attrs:{"append-to-body":e.popperAppendToBody}},[n("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:e.options.length>0&&!e.loading,expression:"options.length > 0 && !loading"}],ref:"scrollbar",class:{"is-empty":!e.allowCreate&&e.query&&0===e.filteredOptionsCount},attrs:{tag:"ul","wrap-class":"el-select-dropdown__wrap","view-class":"el-select-dropdown__list"}},[e.showNewOption?n("el-option",{attrs:{value:e.query,created:""}}):e._e(),e._t("default")],2),e.emptyText&&(!e.allowCreate||e.loading||e.allowCreate&&0===e.options.length)?n("p",{staticClass:"el-select-dropdown__empty"},[e._v("\n "+e._s(e.emptyText)+"\n ")]):e._e()],1)],1)],1)},[],!1,null,null,null);ge.options.__file="select.vue";var ve=ge.exports;ve.install=function(e){e.component(ve.name,ve)};var ye=ve;V.install=function(e){e.component(V.name,V)};var be=V,Me={name:"ElPagination",props:{pageSize:{type:Number,default:10},small:Boolean,total:Number,pageCount:Number,pagerCount:{type:Number,validator:function(e){return(0|e)===e&&e>4&&e<22&&e%2==1},default:7},currentPage:{type:Number,default:1},layout:{default:"prev, pager, next, jumper, ->, total"},pageSizes:{type:Array,default:function(){return[10,20,30,40,50,100]}},popperClass:String,prevText:String,nextText:String,background:Boolean,disabled:Boolean},data:function(){return{internalCurrentPage:1,internalPageSize:0,lastEmittedPage:-1,userChangePageSize:!1}},render:function(e){var t=e("div",{class:["el-pagination",{"is-background":this.background,"el-pagination--small":this.small}]}),n=this.layout||"";if(n){var i={prev:e("prev"),jumper:e("jumper"),pager:e("pager",{attrs:{currentPage:this.internalCurrentPage,pageCount:this.internalPageCount,pagerCount:this.pagerCount,disabled:this.disabled},on:{change:this.handleCurrentChange}}),next:e("next"),sizes:e("sizes",{attrs:{pageSizes:this.pageSizes}}),slot:e("my-slot"),total:e("total")},r=n.split(",").map(function(e){return e.trim()}),o=e("div",{class:"el-pagination__rightwrapper"}),s=!1;return t.children=t.children||[],o.children=o.children||[],r.forEach(function(e){"->"!==e?s?o.children.push(i[e]):t.children.push(i[e]):s=!0}),s&&t.children.unshift(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",disabled:this.$parent.disabled||this.$parent.internalCurrentPage<=1},class:"btn-prev",on:{click:this.$parent.prev}},[this.$parent.prevText?e("span",[this.$parent.prevText]):e("i",{class:"el-icon el-icon-arrow-left"})])}},Next:{render:function(e){return e("button",{attrs:{type:"button",disabled:this.$parent.disabled||this.$parent.internalCurrentPage===this.$parent.internalPageCount||0===this.$parent.internalPageCount},class:"btn-next",on:{click:this.$parent.next}},[this.$parent.nextText?e("span",[this.$parent.nextText]):e("i",{class:"el-icon el-icon-arrow-right"})])}},Sizes:{mixins:[c],props:{pageSizes:Array},watch:{pageSizes:{immediate:!0,handler:function(e,t){Object(Y.m)(e,t)||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,popperClass:this.$parent.popperClass||"",size:"mini",disabled:this.$parent.disabled},on:{input:this.handleChange}},[this.pageSizes.map(function(n){return e("el-option",{attrs:{value:n,label:n+t.t("el.pagination.pagesize")}})})])])},components:{ElSelect:ye,ElOption:be},methods:{handleChange:function(e){e!==this.$parent.internalPageSize&&(this.$parent.internalPageSize=e=parseInt(e,10),this.$parent.userChangePageSize=!0,this.$parent.$emit("update:pageSize",e),this.$parent.$emit("size-change",e))}}},Jumper:{mixins:[c],components:{ElInput:M},data:function(){return{userInput:null}},watch:{"$parent.internalCurrentPage":function(){this.userInput=null}},methods:{handleKeyup:function(e){var t=e.keyCode,n=e.target;13===t&&this.handleChange(n.value)},handleInput:function(e){this.userInput=e},handleChange:function(e){this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(e),this.$parent.emitChange(),this.userInput=null}},render:function(e){return e("span",{class:"el-pagination__jump"},[this.t("el.pagination.goto"),e("el-input",{class:"el-pagination__editor is-in-pagination",attrs:{min:1,max:this.$parent.internalPageCount,value:null!==this.userInput?this.userInput:this.$parent.internalCurrentPage,type:"number",disabled:this.$parent.disabled},nativeOn:{keyup:this.handleKeyup},on:{input:this.handleInput,change:this.handleChange}}),this.t("el.pagination.pageClassifier")])}},Total:{mixins:[c],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:s},methods:{handleCurrentChange:function(e){this.internalCurrentPage=this.getValidCurrentPage(e),this.userChangePageSize=!0,this.emitChange()},prev:function(){if(!this.disabled){var e=this.internalCurrentPage-1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("prev-click",this.internalCurrentPage),this.emitChange()}},next:function(){if(!this.disabled){var e=this.internalCurrentPage+1;this.internalCurrentPage=this.getValidCurrentPage(e),this.$emit("next-click",this.internalCurrentPage),this.emitChange()}},getValidCurrentPage:function(e){e=parseInt(e,10);var t=void 0;return"number"==typeof this.internalPageCount?e<1?t=1:e>this.internalPageCount&&(t=this.internalPageCount):(isNaN(e)||e<1)&&(t=1),void 0===t&&isNaN(e)?t=1:0===t&&(t=1),void 0===t?e:t},emitChange:function(){var e=this;this.$nextTick(function(){(e.internalCurrentPage!==e.lastEmittedPage||e.userChangePageSize)&&(e.$emit("current-change",e.internalCurrentPage),e.lastEmittedPage=e.internalCurrentPage,e.userChangePageSize=!1)})}},computed:{internalPageCount:function(){return"number"==typeof this.total?Math.max(1,Math.ceil(this.total/this.internalPageSize)):"number"==typeof this.pageCount?Math.max(1,this.pageCount):null}},watch:{currentPage:{immediate:!0,handler:function(e){this.internalCurrentPage=this.getValidCurrentPage(e)}},pageSize:{immediate:!0,handler:function(e){this.internalPageSize=isNaN(e)?10:e}},internalCurrentPage:{immediate:!0,handler:function(e){this.$emit("update:currentPage",e),this.lastEmittedPage=-1}},internalPageCount:function(e){var t=this.internalCurrentPage;e>0&&0===t?this.internalCurrentPage=1:t>e&&(this.internalCurrentPage=0===e?1:e,this.userChangePageSize&&this.emitChange()),this.userChangePageSize=!1}},install:function(e){e.component(Me.name,Me)}},we=Me,Ce={name:"ElDialog",mixins:[A,a,h],props:{title:{type:String,default:""},modal:{type:Boolean,default:!0},modalAppendToBody:{type:Boolean,default:!0},appendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},width:String,fullscreen:Boolean,customClass:{type:String,default:""},top:{type:String,default:"15vh"},beforeClose:Function,center:{type:Boolean,default:!1}},data:function(){return{closed:!1}},watch:{visible:function(e){var t=this;e?(this.closed=!1,this.$emit("open"),this.$el.addEventListener("scroll",this.updatePopper),this.$nextTick(function(){t.$refs.dialog.scrollTop=0}),this.appendToBody&&document.body.appendChild(this.$el)):(this.$el.removeEventListener("scroll",this.updatePopper),this.closed||this.$emit("close"))}},computed:{style:function(){var e={};return this.fullscreen||(e.marginTop=this.top,this.width&&(e.width=this.width)),e}},methods:{getMigratingConfig:function(){return{props:{size:"size is removed."}}},handleWrapperClick:function(){this.closeOnClickModal&&this.handleClose()},handleClose:function(){"function"==typeof this.beforeClose?this.beforeClose(this.hide):this.hide()},hide:function(e){!1!==e&&(this.$emit("update:visible",!1),this.$emit("close"),this.closed=!0)},updatePopper:function(){this.broadcast("ElSelectDropdown","updatePopper"),this.broadcast("ElDropdownMenu","updatePopper")},afterEnter:function(){this.$emit("opened")},afterLeave:function(){this.$emit("closed")}},mounted:function(){this.visible&&(this.rendered=!0,this.open(),this.appendToBody&&document.body.appendChild(this.$el))},destroyed:function(){this.appendToBody&&this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)}},xe=Object(r.a)(Ce,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"dialog-fade"},on:{"after-enter":e.afterEnter,"after-leave":e.afterLeave}},[n("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:e.handleWrapperClick(t)}}},[n("div",{ref:"dialog",staticClass:"el-dialog",class:[{"is-fullscreen":e.fullscreen,"el-dialog--center":e.center},e.customClass],style:e.style,attrs:{role:"dialog","aria-modal":"true","aria-label":e.title||"dialog"}},[n("div",{staticClass:"el-dialog__header"},[e._t("title",[n("span",{staticClass:"el-dialog__title"},[e._v(e._s(e.title))])]),e.showClose?n("button",{staticClass:"el-dialog__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:e.handleClose}},[n("i",{staticClass:"el-dialog__close el-icon el-icon-close"})]):e._e()],2),e.rendered?n("div",{staticClass:"el-dialog__body"},[e._t("default")],2):e._e(),e.$slots.footer?n("div",{staticClass:"el-dialog__footer"},[e._t("footer")],2):e._e()])])])},[],!1,null,null,null);xe.options.__file="component.vue";var Ne=xe.exports;Ne.install=function(e){e.component(Ne.name,Ne)};var De=Ne,_e={components:{ElScrollbar:oe},mixins:[$,a],componentName:"ElAutocompleteSuggestions",data:function(){return{parent:this.$parent,dropdownWidth:""}},props:{options:{default:function(){return{gpuAcceleration:!1}}},id:String},methods:{select:function(e){this.dispatch("ElAutocomplete","item-click",e)}},updated:function(){var e=this;this.$nextTick(function(t){e.popperJS&&e.updatePopper()})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$refs.input.$refs.input,this.referenceList=this.$el.querySelector(".el-autocomplete-suggestion__list"),this.referenceList.setAttribute("role","listbox"),this.referenceList.setAttribute("id",this.id)},created:function(){var e=this;this.$on("visible",function(t,n){e.dropdownWidth=n+"px",e.showPopper=t})}},Ie=Object(r.a)(_e,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-autocomplete-suggestion el-popper",class:{"is-loading":!e.parent.hideLoading&&e.parent.loading},style:{width:e.dropdownWidth},attrs:{role:"region"}},[n("el-scrollbar",{attrs:{tag:"ul","wrap-class":"el-autocomplete-suggestion__wrap","view-class":"el-autocomplete-suggestion__list"}},[!e.parent.hideLoading&&e.parent.loading?n("li",[n("i",{staticClass:"el-icon-loading"})]):e._t("default")],2)],1)])},[],!1,null,null,null);Ie.options.__file="autocomplete-suggestions.vue";var ke=Ie.exports,je={name:"ElAutocomplete",mixins:[a,l("input"),h],inheritAttrs:!1,componentName:"ElAutocomplete",components:{ElInput:M,ElAutocompleteSuggestions:ke},directives:{Clickoutside:pe},props:{valueKey:{type:String,default:"value"},popperClass:String,popperOptions:Object,placeholder:String,clearable:{type:Boolean,default:!1},disabled:Boolean,name:String,size:String,value:String,maxlength:Number,minlength:Number,autofocus:Boolean,fetchSuggestions:Function,triggerOnFocus:{type:Boolean,default:!0},customItem:String,selectWhenUnmatched:{type:Boolean,default:!1},prefixIcon:String,suffixIcon:String,label:String,debounce:{type:Number,default:300},placement:{type:String,default:"bottom-start"},hideLoading:Boolean,popperAppendToBody:{type:Boolean,default:!0}},data:function(){return{activated:!1,suggestions:[],loading:!1,highlightedIndex:-1,suggestionDisabled:!1}},computed:{suggestionVisible:function(){var e=this.suggestions;return(Array.isArray(e)&&e.length>0||this.loading)&&this.activated},id:function(){return"el-autocomplete-"+Object(Y.e)()}},watch:{suggestionVisible:function(e){var t=this.getInput();t&&this.broadcast("ElAutocompleteSuggestions","visible",[e,t.offsetWidth])}},methods:{getMigratingConfig:function(){return{props:{"custom-item":"custom-item is removed, use scoped slot instead.",props:"props is removed, use value-key instead."}}},getData:function(e){var t=this;this.suggestionDisabled||(this.loading=!0,this.fetchSuggestions(e,function(e){t.loading=!1,t.suggestionDisabled||(Array.isArray(e)?t.suggestions=e:console.error("[Element Error][Autocomplete]autocomplete suggestions must be an array"))}))},handleChange:function(e){if(this.$emit("input",e),this.suggestionDisabled=!1,!this.triggerOnFocus&&!e)return this.suggestionDisabled=!0,void(this.suggestions=[]);this.debouncedGetData(e)},handleFocus:function(e){this.activated=!0,this.$emit("focus",e),this.triggerOnFocus&&this.debouncedGetData(this.value)},handleBlur:function(e){this.$emit("blur",e)},handleClear:function(){this.activated=!1,this.$emit("clear")},close:function(e){this.activated=!1},handleKeyEnter:function(e){var t=this;this.suggestionVisible&&this.highlightedIndex>=0&&this.highlightedIndex=this.suggestions.length&&(e=this.suggestions.length-1);var t=this.$refs.suggestions.$el.querySelector(".el-autocomplete-suggestion__wrap"),n=t.querySelectorAll(".el-autocomplete-suggestion__list li")[e],i=t.scrollTop,r=n.offsetTop;r+n.scrollHeight>i+t.clientHeight&&(t.scrollTop+=n.scrollHeight),r-1?(this.removeTabindex(),this.resetTabindex(this.menuItems[0]),this.menuItems[0].focus(),e.preventDefault(),e.stopPropagation()):13===t?this.handleClick():[9,27].indexOf(t)>-1&&this.hide()},handleItemKeyDown:function(e){var t=e.keyCode,n=e.target,i=this.menuItemsArray.indexOf(n),r=this.menuItemsArray.length-1,o=void 0;[38,40].indexOf(t)>-1?(o=38===t?0!==i?i-1:0:i-1&&(this.hide(),this.triggerElm.focus())},resetTabindex:function(e){this.removeTabindex(),e.setAttribute("tabindex","0")},removeTabindex:function(){this.triggerElm.setAttribute("tabindex","-1"),this.menuItemsArray.forEach(function(e){e.setAttribute("tabindex","-1")})},initAria:function(){this.dropdownElm.setAttribute("id",this.listId),this.triggerElm.setAttribute("aria-haspopup","list"),this.triggerElm.setAttribute("aria-controls",this.listId),this.menuItems=this.dropdownElm.querySelectorAll("[tabindex='-1']"),this.menuItemsArray=Array.prototype.slice.call(this.menuItems),this.splitButton||(this.triggerElm.setAttribute("role","button"),this.triggerElm.setAttribute("tabindex","0"),this.triggerElm.setAttribute("class",(this.triggerElm.getAttribute("class")||"")+" el-dropdown-selfdefine"))},initEvent:function(){var e=this,t=this.trigger,n=this.show,i=this.hide,r=this.handleClick,o=this.splitButton,s=this.handleTriggerKeyDown,a=this.handleItemKeyDown;this.triggerElm=o?this.$refs.trigger.$el:this.$slots.default[0].elm;var l=this.dropdownElm=this.$slots.dropdown[0].elm;this.triggerElm.addEventListener("keydown",s),l.addEventListener("keydown",a,!0),o||(this.triggerElm.addEventListener("focus",function(){e.focusing=!0}),this.triggerElm.addEventListener("blur",function(){e.focusing=!1}),this.triggerElm.addEventListener("click",function(){e.focusing=!1})),"hover"===t?(this.triggerElm.addEventListener("mouseenter",n),this.triggerElm.addEventListener("mouseleave",i),l.addEventListener("mouseenter",n),l.addEventListener("mouseleave",i)):"click"===t&&this.triggerElm.addEventListener("click",r)},handleMenuItemClick:function(e,t){this.hideOnClick&&(this.visible=!1),this.$emit("command",e,t)},focus:function(){this.triggerElm.focus&&this.triggerElm.focus()}},render:function(e){var t=this,n=this.hide,i=this.splitButton,r=this.type,o=this.dropdownSize,s=i?e("el-button-group",[e("el-button",{attrs:{type:r,size:o},nativeOn:{click:function(e){t.$emit("click",e),n()}}},[this.$slots.default]),e("el-button",{ref:"trigger",attrs:{type:r,size:o},class:"el-dropdown__caret-button"},[e("i",{class:"el-dropdown__icon el-icon-arrow-down"})])]):this.$slots.default;return e("div",{class:"el-dropdown",directives:[{name:"clickoutside",value:n}]},[s,this.$slots.dropdown])}},Re=Object(r.a)(Ye,void 0,void 0,!1,null,null,null);Re.options.__file="dropdown.vue";var Be=Re.exports;Be.install=function(e){e.component(Be.name,Be)};var Qe=Be,Ve={name:"ElDropdownMenu",componentName:"ElDropdownMenu",mixins:[$],props:{visibleArrow:{type:Boolean,default:!0},arrowOffset:{type:Number,default:0}},data:function(){return{size:this.dropdown.dropdownSize}},inject:["dropdown"],created:function(){var e=this;this.$on("updatePopper",function(){e.showPopper&&e.updatePopper()}),this.$on("visible",function(t){e.showPopper=t})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{"dropdown.placement":{immediate:!0,handler:function(e){this.currentPlacement=e}}}},He=Object(r.a)(Ve,function(){var e=this.$createElement,t=this._self._c||e;return t("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":this.doDestroy}},[t("ul",{directives:[{name:"show",rawName:"v-show",value:this.showPopper,expression:"showPopper"}],staticClass:"el-dropdown-menu el-popper",class:[this.size&&"el-dropdown-menu--"+this.size]},[this._t("default")],2)])},[],!1,null,null,null);He.options.__file="dropdown-menu.vue";var We=He.exports;We.install=function(e){e.component(We.name,We)};var Ge=We,qe={name:"ElDropdownItem",mixins:[a],props:{command:{},disabled:Boolean,divided:Boolean},methods:{handleClick:function(e){this.dispatch("ElDropdown","menu-item-click",[this.command,this])}}},Ze=Object(r.a)(qe,function(){var e=this.$createElement;return(this._self._c||e)("li",{staticClass:"el-dropdown-menu__item",class:{"is-disabled":this.disabled,"el-dropdown-menu__item--divided":this.divided},attrs:{"aria-disabled":this.disabled,tabindex:this.disabled?null:-1},on:{click:this.handleClick}},[this._t("default")],2)},[],!1,null,null,null);Ze.options.__file="dropdown-item.vue";var Ke=Ze.exports;Ke.install=function(e){e.component(Ke.name,Ke)};var Je=Ke,Xe=Xe||{};Xe.Utils=Xe.Utils||{},Xe.Utils.focusFirstDescendant=function(e){for(var t=0;t=0;t--){var n=e.childNodes[t];if(Xe.Utils.attemptFocus(n)||Xe.Utils.focusLastDescendant(n))return!0}return!1},Xe.Utils.attemptFocus=function(e){if(!Xe.Utils.isFocusable(e))return!1;Xe.Utils.IgnoreUtilFocusChanges=!0;try{e.focus()}catch(e){}return Xe.Utils.IgnoreUtilFocusChanges=!1,document.activeElement===e},Xe.Utils.isFocusable=function(e){if(e.tabIndex>0||0===e.tabIndex&&null!==e.getAttribute("tabIndex"))return!0;if(e.disabled)return!1;switch(e.nodeName){case"A":return!!e.href&&"ignore"!==e.rel;case"INPUT":return"hidden"!==e.type&&"file"!==e.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}},Xe.Utils.triggerEvent=function(e,t){var n=void 0;n=/^mouse|click/.test(t)?"MouseEvents":/^key/.test(t)?"KeyboardEvent":"HTMLEvents";for(var i=document.createEvent(n),r=arguments.length,o=Array(r>2?r-2:0),s=2;s=0;t--)e.splice(t,0,e[t]);e=e.join("")}return/^[0-9a-fA-F]{6}$/.test(e)?{red:parseInt(e.slice(0,2),16),green:parseInt(e.slice(2,4),16),blue:parseInt(e.slice(4,6),16)}:{red:255,green:255,blue:255}},mixColor:function(e,t){var n=this.getColorChannels(e),i=n.red,r=n.green,o=n.blue;return t>0?(i*=1-t,r*=1-t,o*=1-t):(i+=(255-i)*t,r+=(255-r)*t,o+=(255-o)*t),"rgb("+Math.round(i)+", "+Math.round(r)+", "+Math.round(o)+")"},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 n=this.openedMenus;-1===n.indexOf(e)&&(this.uniqueOpened&&(this.openedMenus=n.filter(function(e){return-1!==t.indexOf(e)})),this.openedMenus.push(e))},closeMenu:function(e){var t=this.openedMenus.indexOf(e);-1!==t&&this.openedMenus.splice(t,1)},handleSubmenuClick:function(e){var t=e.index,n=e.indexPath;-1!==this.openedMenus.indexOf(t)?(this.closeMenu(t),this.$emit("close",t,n)):(this.openMenu(t,n),this.$emit("open",t,n))},handleItemClick:function(e){var t=this,n=e.index,i=e.indexPath,r=this.activeIndex;this.activeIndex=e.index,this.$emit("select",n,i,e),("horizontal"===this.mode||this.collapse)&&(this.openedMenus=[]),this.router&&this.routeToItem(e,function(e){t.activeIndex=r,e&&console.error(e)})},initOpenedMenu:function(){var e=this,t=this.activeIndex,n=this.items[t];n&&"horizontal"!==this.mode&&!this.collapse&&n.indexPath.forEach(function(t){var n=e.submenus[t];n&&e.openMenu(t,n.indexPath)})},routeToItem:function(e,t){var n=e.route||e.index;try{this.$router.push(n,function(){},t)}catch(e){console.error(e)}},open:function(e){var t=this,n=this.submenus[e.toString()].indexPath;n.forEach(function(e){return t.openMenu(e,n)})},close:function(e){this.closeMenu(e)}},mounted:function(){this.initOpenedMenu(),this.$on("item-click",this.handleItemClick),this.$on("submenu-click",this.handleSubmenuClick),"horizontal"===this.mode&&new st(this.$el),this.$watch("items",this.updateActiveIndex)}},lt=Object(r.a)(at,void 0,void 0,!1,null,null,null);lt.options.__file="menu.vue";var ut=lt.exports;ut.install=function(e){e.component(ut.name,ut)};var ct=ut;var ht=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}return e.prototype.beforeEnter=function(e){Object(C.a)(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){Object(C.g)(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&&(Object(C.a)(e,"collapse-transition"),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},e.prototype.afterLeave=function(e){Object(C.g)(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}(),dt={name:"ElCollapseTransition",functional:!0,render:function(e,t){var n=t.children;return e("transition",{on:new ht},n)}},pt={inject:["rootMenu"],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},parentMenu:function(){for(var e=this.$parent;e&&-1===["ElMenu","ElSubmenu"].indexOf(e.$options.componentName);)e=e.$parent;return e},paddingStyle:function(){if("vertical"!==this.rootMenu.mode)return{};var e=20,t=this.$parent;if(this.rootMenu.collapse)e=20;else for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return{paddingLeft:e+"px"}}}},ft={name:"ElSubmenu",componentName:"ElSubmenu",mixins:[pt,a,{props:{transformOrigin:{type:[Boolean,String],default:!1},offset:$.props.offset,boundariesPadding:$.props.boundariesPadding,popperOptions:$.props.popperOptions},data:$.data,methods:$.methods,beforeDestroy:$.beforeDestroy,deactivated:$.deactivated}],components:{ElCollapseTransition:dt},props:{index:{type:String,required:!0},showTimeout:{type:Number,default:300},hideTimeout:{type:Number,default:300},popperClass:String,disabled:Boolean,popperAppendToBody:{type:Boolean,default:void 0}},data:function(){return{popperJS:null,timeout:null,items:{},submenus:{},mouseInChild:!1}},watch:{opened:function(e){var t=this;this.isMenuPopup&&this.$nextTick(function(e){t.updatePopper()})}},computed:{appendToBody:function(){return void 0===this.popperAppendToBody?this.isFirstLevel:this.popperAppendToBody},menuTransitionName:function(){return this.rootMenu.collapse?"el-zoom-in-left":"el-zoom-in-top"},opened:function(){return this.rootMenu.openedMenus.indexOf(this.index)>-1},active:function(){var e=!1,t=this.submenus,n=this.items;return Object.keys(n).forEach(function(t){n[t].active&&(e=!0)}),Object.keys(t).forEach(function(n){t[n].active&&(e=!0)}),e},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},isMenuPopup:function(){return this.rootMenu.isMenuPopup},titleStyle:function(){return"horizontal"!==this.mode?{color:this.textColor}:{borderBottomColor:this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent",color:this.active?this.activeTextColor:this.textColor}},isFirstLevel:function(){for(var e=!0,t=this.$parent;t&&t!==this.rootMenu;){if(["ElSubmenu","ElMenuItemGroup"].indexOf(t.$options.componentName)>-1){e=!1;break}t=t.$parent}return e}},methods:{handleCollapseToggle:function(e){e?this.initPopper():this.doDestroy()},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(){var e=this.rootMenu,t=this.disabled;"hover"===e.menuTrigger&&"horizontal"===e.mode||e.collapse&&"vertical"===e.mode||t||this.dispatch("ElMenu","submenu-click",this)},handleMouseenter:function(){var e=this,t=this.rootMenu,n=this.disabled;"click"===t.menuTrigger&&"horizontal"===t.mode||!t.collapse&&"vertical"===t.mode||n||(this.dispatch("ElSubmenu","mouse-enter-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.rootMenu.openMenu(e.index,e.indexPath)},this.showTimeout))},handleMouseleave:function(){var e=this,t=this.rootMenu;"click"===t.menuTrigger&&"horizontal"===t.mode||!t.collapse&&"vertical"===t.mode||(this.dispatch("ElSubmenu","mouse-leave-child"),clearTimeout(this.timeout),this.timeout=setTimeout(function(){!e.mouseInChild&&e.rootMenu.closeMenu(e.index)},this.hideTimeout))},handleTitleMouseenter:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.hoverBackground)}},handleTitleMouseleave:function(){if("horizontal"!==this.mode||this.rootMenu.backgroundColor){var e=this.$refs["submenu-title"];e&&(e.style.backgroundColor=this.rootMenu.backgroundColor||"")}},updatePlacement:function(){this.currentPlacement="horizontal"===this.mode&&this.isFirstLevel?"bottom-start":"right-start"},initPopper:function(){this.referenceElm=this.$el,this.popperElm=this.$refs.menu,this.updatePlacement()}},created:function(){var e=this;this.$on("toggle-collapse",this.handleCollapseToggle),this.$on("mouse-enter-child",function(){e.mouseInChild=!0,clearTimeout(e.timeout)}),this.$on("mouse-leave-child",function(){e.mouseInChild=!1,clearTimeout(e.timeout)})},mounted:function(){this.parentMenu.addSubmenu(this),this.rootMenu.addSubmenu(this),this.initPopper()},beforeDestroy:function(){this.parentMenu.removeSubmenu(this),this.rootMenu.removeSubmenu(this)},render:function(e){var t=this.active,n=this.opened,i=this.paddingStyle,r=this.titleStyle,o=this.backgroundColor,s=this.rootMenu,a=this.currentPlacement,l=this.menuTransitionName,u=this.mode,c=this.disabled,h=this.popperClass,d=this.$slots,p=this.isFirstLevel,f=e("transition",{attrs:{name:l}},[e("div",{ref:"menu",directives:[{name:"show",value:n}],class:["el-menu--"+u,h],on:{mouseenter:this.handleMouseenter,mouseleave:this.handleMouseleave,focus:this.handleMouseenter}},[e("ul",{attrs:{role:"menu"},class:["el-menu el-menu--popup","el-menu--popup-"+a],style:{backgroundColor:s.backgroundColor||""}},[d.default])])]),m=e("el-collapse-transition",[e("ul",{attrs:{role:"menu"},class:"el-menu el-menu--inline",directives:[{name:"show",value:n}],style:{backgroundColor:s.backgroundColor||""}},[d.default])]),g="horizontal"===s.mode&&p||"vertical"===s.mode&&!s.collapse?"el-icon-arrow-down":"el-icon-arrow-right";return e("li",{class:{"el-submenu":!0,"is-active":t,"is-opened":n,"is-disabled":c},attrs:{role:"menuitem","aria-haspopup":"true","aria-expanded":n},on:{mouseenter:this.handleMouseenter,mouseleave:this.handleMouseleave,focus:this.handleMouseenter}},[e("div",{class:"el-submenu__title",ref:"submenu-title",on:{click:this.handleClick,mouseenter:this.handleTitleMouseenter,mouseleave:this.handleTitleMouseleave},style:[i,r,{backgroundColor:o}]},[d.title,e("i",{class:["el-submenu__icon-arrow",g]})]),this.isMenuPopup?f:m])}},mt=Object(r.a)(ft,void 0,void 0,!1,null,null,null);mt.options.__file="submenu.vue";var gt=mt.exports;gt.install=function(e){e.component(gt.name,gt)};var vt=gt,yt="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 bt(e){return null!==e&&"object"===(void 0===e?"undefined":yt(e))&&Object(Y.h)(e,"componentOptions")}var Mt={name:"ElTooltip",mixins:[$],props:{openDelay:{type:Number,default:0},disabled:Boolean,manual:Boolean,effect:{type:String,default:"dark"},arrowOffset:{type:Number,default:0},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},hideAfter:{type:Number,default:0}},data:function(){return{timeoutPending:null,focusing:!1}},computed:{tooltipId:function(){return"el-tooltip-"+Object(Y.e)()}},beforeCreate:function(){var e=this;this.$isServer||(this.popperVM=new w.a({data:{node:""},render:function(e){return this.node}}).$mount(),this.debounceClose=ae()(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",attrs:{role:"tooltip",id:this.tooltipId,"aria-hidden":this.disabled||!this.showPopper?"true":"false"},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 n,i=(n=this.$slots.default)&&n.filter(function(e){return e&&e.tag})[0];if(!i)return i;var r=i.data=i.data||{};return r.staticClass=this.concatClass(r.staticClass,"el-tooltip"),i},mounted:function(){var e=this;this.referenceElm=this.$el,1===this.$el.nodeType&&(this.$el.setAttribute("aria-describedby",this.tooltipId),this.$el.setAttribute("tabindex",0),Object(C.e)(this.referenceElm,"mouseenter",this.show),Object(C.e)(this.referenceElm,"mouseleave",this.hide),Object(C.e)(this.referenceElm,"focus",function(){if(e.$slots.default&&e.$slots.default.length){var t=e.$slots.default[0].componentInstance;t&&t.focus?t.focus():e.handleFocus()}else e.handleFocus()}),Object(C.e)(this.referenceElm,"blur",this.handleBlur),Object(C.e)(this.referenceElm,"click",this.removeFocusing))},watch:{focusing:function(e){e?Object(C.a)(this.referenceElm,"focusing"):Object(C.g)(this.referenceElm,"focusing")}},methods:{show:function(){this.setExpectedState(!0),this.handleShowPopper()},hide:function(){this.setExpectedState(!1),this.debounceClose()},handleFocus:function(){this.focusing=!0,this.show()},handleBlur:function(){this.focusing=!1,this.hide()},removeFocusing:function(){this.focusing=!1},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),this.hideAfter>0&&(this.timeoutPending=setTimeout(function(){e.showPopper=!1},this.hideAfter)))},handleClosePopper:function(){this.enterable&&this.expectedState||this.manual||(clearTimeout(this.timeout),this.timeoutPending&&clearTimeout(this.timeoutPending),this.showPopper=!1,this.disabled&&this.doDestroy())},setExpectedState:function(e){!1===e&&clearTimeout(this.timeoutPending),this.expectedState=e}},beforeDestroy:function(){this.popperVM&&this.popperVM.$destroy()},destroyed:function(){var e=this.referenceElm;Object(C.d)(e,"mouseenter",this.show),Object(C.d)(e,"mouseleave",this.hide),Object(C.d)(e,"focus",this.handleFocus),Object(C.d)(e,"blur",this.handleBlur),Object(C.d)(e,"click",this.removeFocusing)},install:function(e){e.component(Mt.name,Mt)}},wt=Mt,Ct={name:"ElMenuItem",componentName:"ElMenuItem",mixins:[pt,a],components:{ElTooltip:wt},props:{index:{type:String,required:!0},route:[String,Object],disabled:Boolean},computed:{active:function(){return this.index===this.rootMenu.activeIndex},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},itemStyle:function(){var e={color:this.active?this.activeTextColor:this.textColor};return"horizontal"!==this.mode||this.isNested||(e.borderBottomColor=this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent"),e},isNested:function(){return this.parentMenu!==this.rootMenu}},methods:{onMouseEnter:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.hoverBackground)},onMouseLeave:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.backgroundColor)},handleClick:function(){this.disabled||(this.dispatch("ElMenu","item-click",this),this.$emit("click",this))}},mounted:function(){this.parentMenu.addItem(this),this.rootMenu.addItem(this)},beforeDestroy:function(){this.parentMenu.removeItem(this),this.rootMenu.removeItem(this)}},xt=Object(r.a)(Ct,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("li",{staticClass:"el-menu-item",class:{"is-active":e.active,"is-disabled":e.disabled},style:[e.paddingStyle,e.itemStyle,{backgroundColor:e.backgroundColor}],attrs:{role:"menuitem",tabindex:"-1"},on:{click:e.handleClick,mouseenter:e.onMouseEnter,focus:e.onMouseEnter,blur:e.onMouseLeave,mouseleave:e.onMouseLeave}},["ElMenu"===e.parentMenu.$options.componentName&&e.rootMenu.collapse&&e.$slots.title?n("el-tooltip",{attrs:{effect:"dark",placement:"right"}},[n("div",{attrs:{slot:"content"},slot:"content"},[e._t("title")],2),n("div",{staticStyle:{position:"absolute",left:"0",top:"0",height:"100%",width:"100%",display:"inline-block","box-sizing":"border-box",padding:"0 20px"}},[e._t("default")],2)]):[e._t("default"),e._t("title")]],2)},[],!1,null,null,null);xt.options.__file="menu-item.vue";var Nt=xt.exports;Nt.install=function(e){e.component(Nt.name,Nt)};var Dt=Nt,_t={name:"ElMenuItemGroup",componentName:"ElMenuItemGroup",inject:["rootMenu"],props:{title:{type:String}},data:function(){return{paddingLeft:20}},computed:{levelPadding:function(){var e=20,t=this.$parent;if(this.rootMenu.collapse)return 20;for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return e}}},It=Object(r.a)(_t,function(){var e=this.$createElement,t=this._self._c||e;return t("li",{staticClass:"el-menu-item-group"},[t("div",{staticClass:"el-menu-item-group__title",style:{paddingLeft:this.levelPadding+"px"}},[this.$slots.title?this._t("title"):[this._v(this._s(this.title))]],2),t("ul",[this._t("default")],2)])},[],!1,null,null,null);It.options.__file="menu-item-group.vue";var kt=It.exports;kt.install=function(e){e.component(kt.name,kt)};var jt=kt,Tt={bind:function(e,t,n){var i=null,r=void 0,o=function(){return n.context[t.expression].apply()},s=function(){new Date-r<100&&o(),clearInterval(i),i=null};Object(C.e)(e,"mousedown",function(e){0===e.button&&(r=new Date,Object(C.f)(document,"mouseup",s),clearInterval(i),i=setInterval(o,100))})}},St={name:"ElInputNumber",mixins:[l("input")],inject:{elForm:{default:""},elFormItem:{default:""}},directives:{repeatClick:Tt},components:{ElInput:M},props:{step:{type:Number,default:1},max:{type:Number,default:1/0},min:{type:Number,default:-1/0},value:{},disabled:Boolean,size:String,controls:{type:Boolean,default:!0},controlsPosition:{type:String,default:""},name:String,label:String,placeholder:String,precision:{type:Number,validator:function(e){return e>=0&&e===parseInt(e,10)}}},data:function(){return{currentValue:0,userInput:null}},watch:{value:{immediate:!0,handler:function(e){var t=void 0===e?e:Number(e);if(void 0!==t){if(isNaN(t))return;void 0!==this.precision&&(t=this.toPrecision(t,this.precision))}t>=this.max&&(t=this.max),t<=this.min&&(t=this.min),this.currentValue=t,this.userInput=null,this.$emit("input",t)}}},computed:{minDisabled:function(){return this._decrease(this.value,this.step)this.max},numPrecision:function(){var e=this.value,t=this.step,n=this.getPrecision,i=this.precision,r=n(t);return void 0!==i?(r>i&&console.warn("[Element Warn][InputNumber]precision should not be less than the decimal places of step"),i):Math.max(n(e),r)},controlsAtRight:function(){return this.controls&&"right"===this.controlsPosition},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},inputNumberSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},inputNumberDisabled:function(){return this.disabled||(this.elForm||{}).disabled},displayValue:function(){if(null!==this.userInput)return this.userInput;var e=this.currentValue;return"number"==typeof e&&void 0!==this.precision?e.toFixed(this.precision):e}},methods:{toPrecision:function(e,t){return void 0===t&&(t=this.numPrecision),parseFloat(parseFloat(Number(e).toFixed(t)))},getPrecision:function(e){if(void 0===e)return 0;var t=e.toString(),n=t.indexOf("."),i=0;return-1!==n&&(i=t.length-n-1),i},_increase:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var n=Math.pow(10,this.numPrecision);return this.toPrecision((n*e+n*t)/n)},_decrease:function(e,t){if("number"!=typeof e&&void 0!==e)return this.currentValue;var n=Math.pow(10,this.numPrecision);return this.toPrecision((n*e-n*t)/n)},increase:function(){if(!this.inputNumberDisabled&&!this.maxDisabled){var e=this.value||0,t=this._increase(e,this.step);this.setCurrentValue(t)}},decrease:function(){if(!this.inputNumberDisabled&&!this.minDisabled){var e=this.value||0,t=this._decrease(e,this.step);this.setCurrentValue(t)}},handleBlur:function(e){this.$emit("blur",e)},handleFocus:function(e){this.$emit("focus",e)},setCurrentValue:function(e){var t=this.currentValue;"number"==typeof e&&void 0!==this.precision&&(e=this.toPrecision(e,this.precision)),e>=this.max&&(e=this.max),e<=this.min&&(e=this.min),t!==e&&(this.userInput=null,this.$emit("input",e),this.$emit("change",e,t),this.currentValue=e)},handleInput:function(e){this.userInput=e},handleInputChange:function(e){var t=""===e?void 0:Number(e);isNaN(t)&&""!==e||this.setCurrentValue(t),this.userInput=null},select:function(){this.$refs.input.select()}},mounted:function(){var e=this.$refs.input.$refs.input;e.setAttribute("role","spinbutton"),e.setAttribute("aria-valuemax",this.max),e.setAttribute("aria-valuemin",this.min),e.setAttribute("aria-valuenow",this.currentValue),e.setAttribute("aria-disabled",this.inputNumberDisabled)},updated:function(){this.$refs&&this.$refs.input&&this.$refs.input.$refs.input.setAttribute("aria-valuenow",this.currentValue)}},Lt=Object(r.a)(St,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{class:["el-input-number",e.inputNumberSize?"el-input-number--"+e.inputNumberSize:"",{"is-disabled":e.inputNumberDisabled},{"is-without-controls":!e.controls},{"is-controls-right":e.controlsAtRight}],on:{dragstart:function(e){e.preventDefault()}}},[e.controls?n("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-input-number__decrease",class:{"is-disabled":e.minDisabled},attrs:{role:"button"},on:{keydown:function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?e.decrease(t):null}}},[n("i",{class:"el-icon-"+(e.controlsAtRight?"arrow-down":"minus")})]):e._e(),e.controls?n("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-input-number__increase",class:{"is-disabled":e.maxDisabled},attrs:{role:"button"},on:{keydown:function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?e.increase(t):null}}},[n("i",{class:"el-icon-"+(e.controlsAtRight?"arrow-up":"plus")})]):e._e(),n("el-input",{ref:"input",attrs:{value:e.displayValue,placeholder:e.placeholder,disabled:e.inputNumberDisabled,size:e.inputNumberSize,max:e.max,min:e.min,name:e.name,label:e.label},on:{blur:e.handleBlur,focus:e.handleFocus,input:e.handleInput,change:e.handleInputChange},nativeOn:{keydown:[function(t){return"button"in t||!e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?(t.preventDefault(),e.increase(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?(t.preventDefault(),e.decrease(t)):null}]}})],1)},[],!1,null,null,null);Lt.options.__file="input-number.vue";var Ot=Lt.exports;Ot.install=function(e){e.component(Ot.name,Ot)};var At=Ot,Et={name:"ElRadio",mixins:[a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElRadio",props:{value:{},label:{},disabled:Boolean,name:String,border:Boolean,size: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)}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._radioGroup.radioGroupSize||e},isDisabled:function(){return this.isGroup?this._radioGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this.isGroup&&this.model!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.model),e.isGroup&&e.dispatch("ElRadioGroup","handleChange",e.model)})}}},zt=Object(r.a)(Et,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("label",{staticClass:"el-radio",class:[e.border&&e.radioSize?"el-radio--"+e.radioSize:"",{"is-disabled":e.isDisabled},{"is-focus":e.focus},{"is-bordered":e.border},{"is-checked":e.model===e.label}],attrs:{role:"radio","aria-checked":e.model===e.label,"aria-disabled":e.isDisabled,tabindex:e.tabIndex},on:{keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"space",32,t.key,[" ","Spacebar"]))return null;t.stopPropagation(),t.preventDefault(),e.model=e.isDisabled?e.model:e.label}}},[n("span",{staticClass:"el-radio__input",class:{"is-disabled":e.isDisabled,"is-checked":e.model===e.label}},[n("span",{staticClass:"el-radio__inner"}),n("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-radio__original",attrs:{type:"radio","aria-hidden":"true",name:e.name,disabled:e.isDisabled,tabindex:"-1"},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},e.handleChange]}})]),n("span",{staticClass:"el-radio__label",on:{keydown:function(e){e.stopPropagation()}}},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2)])},[],!1,null,null,null);zt.options.__file="radio.vue";var $t=zt.exports;$t.install=function(e){e.component($t.name,$t)};var Pt=$t,Ft=Object.freeze({LEFT:37,UP:38,RIGHT:39,DOWN:40}),Ut={name:"ElRadioGroup",componentName:"ElRadioGroup",inject:{elFormItem:{default:""}},mixins:[a],props:{value:{},size:String,fill:String,textColor:String,disabled:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},created:function(){var e=this;this.$on("handleChange",function(t){e.$emit("change",t)})},mounted:function(){var e=this.$el.querySelectorAll("[type=radio]"),t=this.$el.querySelectorAll("[role=radio]")[0];![].some.call(e,function(e){return e.checked})&&t&&(t.tabIndex=0)},methods:{handleKeydown:function(e){var t=e.target,n="INPUT"===t.nodeName?"[type=radio]":"[role=radio]",i=this.$el.querySelectorAll(n),r=i.length,o=[].indexOf.call(i,t),s=this.$el.querySelectorAll("[role=radio]");switch(e.keyCode){case Ft.LEFT:case Ft.UP:e.stopPropagation(),e.preventDefault(),0===o?(s[r-1].click(),s[r-1].focus()):(s[o-1].click(),s[o-1].focus());break;case Ft.RIGHT:case Ft.DOWN:o===r-1?(e.stopPropagation(),e.preventDefault(),s[0].click(),s[0].focus()):(s[o+1].click(),s[o+1].focus())}}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[this.value])}}},Yt=Object(r.a)(Ut,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-radio-group",attrs:{role:"radiogroup"},on:{keydown:this.handleKeydown}},[this._t("default")],2)},[],!1,null,null,null);Yt.options.__file="radio-group.vue";var Rt=Yt.exports;Rt.install=function(e){e.component(Rt.name,Rt)};var Bt=Rt,Qt={name:"ElRadioButton",mixins:[a],inject:{elForm:{default:""},elFormItem:{default:""}},props:{label:{},disabled:Boolean,name:String},data:function(){return{focus:!1}},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||""}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._radioGroup.radioGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this.disabled||this._radioGroup.disabled||(this.elForm||{}).disabled},tabIndex:function(){return this.isDisabled||this._radioGroup&&this.value!==this.label?-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.dispatch("ElRadioGroup","handleChange",e.value)})}}},Vt=Object(r.a)(Qt,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("label",{staticClass:"el-radio-button",class:[e.size?"el-radio-button--"+e.size:"",{"is-active":e.value===e.label},{"is-disabled":e.isDisabled},{"is-focus":e.focus}],attrs:{role:"radio","aria-checked":e.value===e.label,"aria-disabled":e.isDisabled,tabindex:e.tabIndex},on:{keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"space",32,t.key,[" ","Spacebar"]))return null;t.stopPropagation(),t.preventDefault(),e.value=e.isDisabled?e.value:e.label}}},[n("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,tabindex:"-1"},domProps:{value:e.label,checked:e._q(e.value,e.label)},on:{change:[function(t){e.value=e.label},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}),n("span",{staticClass:"el-radio-button__inner",style:e.value===e.label?e.activeStyle:null,on:{keydown:function(e){e.stopPropagation()}}},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2)])},[],!1,null,null,null);Vt.options.__file="radio-button.vue";var Ht=Vt.exports;Ht.install=function(e){e.component(Ht.name,Ht)};var Wt=Ht,Gt={name:"ElCheckbox",mixins:[a],inject:{elForm:{default:""},elFormItem:{default:""}},componentName:"ElCheckbox",data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},computed:{model:{get:function(){return this.isGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this.isGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.lengththis._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):(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},isDisabled:function(){return this.isGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup&&this._checkboxGroup.checkboxGroupSize||e}},props:{value:{},label:{},indeterminate:Boolean,disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number],id:String,controls:String,border:Boolean,size:String},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var n=void 0;n=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",n,e),this.$nextTick(function(){t.isGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()},mounted:function(){this.indeterminate&&this.$el.setAttribute("aria-controls",this.controls)},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}}},qt=Object(r.a)(Gt,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("label",{staticClass:"el-checkbox",class:[e.border&&e.checkboxSize?"el-checkbox--"+e.checkboxSize:"",{"is-disabled":e.isDisabled},{"is-bordered":e.border},{"is-checked":e.isChecked}],attrs:{role:"checkbox","aria-checked":e.indeterminate?"mixed":e.isChecked,"aria-disabled":e.isDisabled,id:e.id}},[n("span",{staticClass:"el-checkbox__input",class:{"is-disabled":e.isDisabled,"is-checked":e.isChecked,"is-indeterminate":e.indeterminate,"is-focus":e.focus},attrs:{"aria-checked":"mixed"}},[n("span",{staticClass:"el-checkbox__inner"}),e.trueLabel||e.falseLabel?n("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",name:e.name,disabled:e.isDisabled,"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 n=e.model,i=t.target,r=i.checked?e.trueLabel:e.falseLabel;if(Array.isArray(n)){var o=e._i(n,null);i.checked?o<0&&(e.model=n.concat([null])):o>-1&&(e.model=n.slice(0,o).concat(n.slice(o+1)))}else e.model=r},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}):n("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox","aria-hidden":"true",disabled:e.isDisabled,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 n=e.model,i=t.target,r=!!i.checked;if(Array.isArray(n)){var o=e.label,s=e._i(n,o);i.checked?s<0&&(e.model=n.concat([o])):s>-1&&(e.model=n.slice(0,s).concat(n.slice(s+1)))}else e.model=r},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}})]),e.$slots.default||e.label?n("span",{staticClass:"el-checkbox__label"},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2):e._e()])},[],!1,null,null,null);qt.options.__file="checkbox.vue";var Zt=qt.exports;Zt.install=function(e){e.component(Zt.name,Zt)};var Kt=Zt,Jt={name:"ElCheckboxButton",mixins:[a],inject:{elForm:{default:""},elFormItem:{default:""}},data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!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){this._checkboxGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.lengththis._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):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}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._checkboxGroup.checkboxGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this._checkboxGroup?this._checkboxGroup.disabled||this.disabled||(this.elForm||{}).disabled:this.disabled||(this.elForm||{}).disabled}},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;if(!this.isLimitExceeded){var n=void 0;n=e.target.checked?void 0===this.trueLabel||this.trueLabel:void 0!==this.falseLabel&&this.falseLabel,this.$emit("change",n,e),this.$nextTick(function(){t._checkboxGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}}},created:function(){this.checked&&this.addToStore()}},Xt=Object(r.a)(Jt,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("label",{staticClass:"el-checkbox-button",class:[e.size?"el-checkbox-button--"+e.size:"",{"is-disabled":e.isDisabled},{"is-checked":e.isChecked},{"is-focus":e.focus}],attrs:{role:"checkbox","aria-checked":e.isChecked,"aria-disabled":e.isDisabled}},[e.trueLabel||e.falseLabel?n("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.isDisabled,"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 n=e.model,i=t.target,r=i.checked?e.trueLabel:e.falseLabel;if(Array.isArray(n)){var o=e._i(n,null);i.checked?o<0&&(e.model=n.concat([null])):o>-1&&(e.model=n.slice(0,o).concat(n.slice(o+1)))}else e.model=r},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}):n("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.isDisabled},domProps:{value:e.label,checked:Array.isArray(e.model)?e._i(e.model,e.label)>-1:e.model},on:{change:[function(t){var n=e.model,i=t.target,r=!!i.checked;if(Array.isArray(n)){var o=e.label,s=e._i(n,o);i.checked?s<0&&(e.model=n.concat([o])):s>-1&&(e.model=n.slice(0,s).concat(n.slice(s+1)))}else e.model=r},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}),e.$slots.default||e.label?n("span",{staticClass:"el-checkbox-button__inner",style:e.isChecked?e.activeStyle:null},[e._t("default",[e._v(e._s(e.label))])],2):e._e()])},[],!1,null,null,null);Xt.options.__file="checkbox-button.vue";var en=Xt.exports;en.install=function(e){e.component(en.name,en)};var tn=en,nn={name:"ElCheckboxGroup",componentName:"ElCheckboxGroup",mixins:[a],inject:{elFormItem:{default:""}},props:{value:{},disabled:Boolean,min:Number,max:Number,size:String,fill:String,textColor:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[e])}}},rn=Object(r.a)(nn,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-checkbox-group",attrs:{role:"group","aria-label":"checkbox-group"}},[this._t("default")],2)},[],!1,null,null,null);rn.options.__file="checkbox-group.vue";var on=rn.exports;on.install=function(e){e.component(on.name,on)};var sn=on,an={name:"ElSwitch",mixins:[l("input"),h],inject:{elForm:{default:""}},props:{value:{type:[Boolean,String,Number],default:!1},disabled:{type:Boolean,default:!1},width:{type:Number,default:40},activeIconClass:{type:String,default:""},inactiveIconClass:{type:String,default:""},activeText:String,inactiveText:String,activeColor:{type:String,default:""},inactiveColor:{type:String,default:""},activeValue:{type:[Boolean,String,Number],default:!0},inactiveValue:{type:[Boolean,String,Number],default:!1},name:{type:String,default:""},id:String},data:function(){return{coreWidth:this.width}},created:function(){~[this.activeValue,this.inactiveValue].indexOf(this.value)||this.$emit("input",this.inactiveValue)},computed:{checked:function(){return this.value===this.activeValue},switchDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{checked:function(){this.$refs.input.checked=this.checked,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor()}},methods:{handleChange:function(e){var t=this;this.$emit("input",this.checked?this.inactiveValue:this.activeValue),this.$emit("change",this.checked?this.inactiveValue:this.activeValue),this.$nextTick(function(){t.$refs.input.checked=t.checked})},setBackgroundColor:function(){var e=this.checked?this.activeColor:this.inactiveColor;this.$refs.core.style.borderColor=e,this.$refs.core.style.backgroundColor=e},switchValue:function(){!this.switchDisabled&&this.handleChange()},getMigratingConfig:function(){return{props:{"on-color":"on-color is renamed to active-color.","off-color":"off-color is renamed to inactive-color.","on-text":"on-text is renamed to active-text.","off-text":"off-text is renamed to inactive-text.","on-value":"on-value is renamed to active-value.","off-value":"off-value is renamed to inactive-value.","on-icon-class":"on-icon-class is renamed to active-icon-class.","off-icon-class":"off-icon-class is renamed to inactive-icon-class."}}}},mounted:function(){this.coreWidth=this.width||40,(this.activeColor||this.inactiveColor)&&this.setBackgroundColor(),this.$refs.input.checked=this.checked}},ln=Object(r.a)(an,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-switch",class:{"is-disabled":e.switchDisabled,"is-checked":e.checked},attrs:{role:"switch","aria-checked":e.checked,"aria-disabled":e.switchDisabled},on:{click:e.switchValue}},[n("input",{ref:"input",staticClass:"el-switch__input",attrs:{type:"checkbox",id:e.id,name:e.name,"true-value":e.activeValue,"false-value":e.inactiveValue,disabled:e.switchDisabled},on:{change:e.handleChange,keydown:function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?e.switchValue(t):null}}}),e.inactiveIconClass||e.inactiveText?n("span",{class:["el-switch__label","el-switch__label--left",e.checked?"":"is-active"]},[e.inactiveIconClass?n("i",{class:[e.inactiveIconClass]}):e._e(),!e.inactiveIconClass&&e.inactiveText?n("span",{attrs:{"aria-hidden":e.checked}},[e._v(e._s(e.inactiveText))]):e._e()]):e._e(),n("span",{ref:"core",staticClass:"el-switch__core",style:{width:e.coreWidth+"px"}}),e.activeIconClass||e.activeText?n("span",{class:["el-switch__label","el-switch__label--right",e.checked?"is-active":""]},[e.activeIconClass?n("i",{class:[e.activeIconClass]}):e._e(),!e.activeIconClass&&e.activeText?n("span",{attrs:{"aria-hidden":!e.checked}},[e._v(e._s(e.activeText))]):e._e()]):e._e()])},[],!1,null,null,null);ln.options.__file="component.vue";var un=ln.exports;un.install=function(e){e.component(un.name,un)};var cn=un,hn={mixins:[a],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!0===e.visible})}},created:function(){this.$on("queryChange",this.queryChange)},mounted:function(){this.disabled&&this.broadcast("ElOption","handleGroupDisabled",this.disabled)}},dn=Object(r.a)(hn,function(){var e=this.$createElement,t=this._self._c||e;return t("ul",{directives:[{name:"show",rawName:"v-show",value:this.visible,expression:"visible"}],staticClass:"el-select-group__wrap"},[t("li",{staticClass:"el-select-group__title"},[this._v(this._s(this.label))]),t("li",[t("ul",{staticClass:"el-select-group"},[this._t("default")],2)])])},[],!1,null,null,null);dn.options.__file="option-group.vue";var pn=dn.exports;pn.install=function(e){e.component(pn.name,pn)};var fn=pn,mn=n(62),gn=n.n(mn),vn="undefined"!=typeof navigator&&navigator.userAgent.toLowerCase().indexOf("firefox")>-1,yn={bind:function(e,t){var n,i;n=e,i=t.value,n&&n.addEventListener&&n.addEventListener(vn?"DOMMouseScroll":"mousewheel",function(e){var t=gn()(e);i&&i.apply(this,[e,t])})}},bn="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},Mn=function(e){for(var t=e.target;t&&"HTML"!==t.tagName.toUpperCase();){if("TD"===t.tagName.toUpperCase())return t;t=t.parentNode}return null},wn=function(e){return null!==e&&"object"===(void 0===e?"undefined":bn(e))},Cn=function(e,t,n,i,r){if(!t&&!i&&(!r||Array.isArray(r)&&!r.length))return e;n="string"==typeof n?"descending"===n?-1:1:n&&n<0?-1:1;var o=i?null:function(n,i){return r?(Array.isArray(r)||(r=[r]),r.map(function(t){return"string"==typeof t?Object(Y.g)(n,t):t(n,i,e)})):("$key"!==t&&wn(n)&&"$value"in n&&(n=n.$value),[wn(n)?Object(Y.g)(n,t):n])};return e.map(function(e,t){return{value:e,index:t,key:o?o(e,t):null}}).sort(function(e,t){var r=function(e,t){if(i)return i(e.value,t.value);for(var n=0,r=e.key.length;nt.key[n])return 1}return 0}(e,t);return r||(r=e.index-t.index),r*n}).map(function(e){return e.value})},xn=function(e,t){var n=null;return e.columns.forEach(function(e){e.id===t&&(n=e)}),n},Nn=function(e,t){var n=(t.className||"").match(/el-table_[^\s]+/gm);return n?xn(e,n[0]):null},Dn=function(e,t){if(!e)throw new Error("row is required when get row identity");if("string"==typeof t){if(t.indexOf(".")<0)return e[t];for(var n=t.split("."),i=e,r=0;r-1&&(r.splice(o,1),i=!0),i},jn=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e)throw new Error("Table is required.");for(var n in this.table=e,this.states={rowKey:null,_columns:[],originColumns:[],columns:[],fixedColumns:[],rightFixedColumns:[],leafColumns:[],fixedLeafColumns:[],rightFixedLeafColumns:[],leafColumnsLength:0,fixedLeafColumnsLength:0,rightFixedLeafColumnsLength:0,isComplex:!1,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,selectOnIndeterminate:!1},t)t.hasOwnProperty(n)&&this.states.hasOwnProperty(n)&&(this.states[n]=t[n])};jn.prototype.mutations={setData:function(e,t){var n=this,i=e._data!==t;e._data=t,Object.keys(e.filters).forEach(function(i){var r=e.filters[i];if(r&&0!==r.length){var o=xn(n.states,i);o&&o.filterMethod&&(t=t.filter(function(e){return r.some(function(t){return o.filterMethod.call(null,t,e,o)})}))}}),e.filteredData=t,e.data=_n(t||[],e),this.updateCurrentRow();var r=e.rowKey;if(e.reserveSelection)if(r){var o=e.selection,s=In(o,r);e.data.forEach(function(e){var t=Dn(e,r),n=s[t];n&&(o[n.index]=e)}),this.updateAllSelected()}else console.warn("WARN: rowKey is required when reserve-selection is enabled.");else i?this.clearSelection():this.cleanSelection(),this.updateAllSelected();if(e.defaultExpandAll)this.states.expandRows=(e.data||[]).slice(0);else if(r){var a=In(this.states.expandRows,r),l=[],u=e.data,c=Array.isArray(u),h=0;for(u=c?u:u[Symbol.iterator]();;){var d;if(c){if(h>=u.length)break;d=u[h++]}else{if((h=u.next()).done)break;d=h.value}var p=d;a[Dn(p,r)]&&l.push(p)}this.states.expandRows=l}else this.states.expandRows=[];w.a.nextTick(function(){return n.table.updateScrollY()})},changeSortCondition:function(e,t){var n=this;e.data=_n(e.filteredData||e._data||[],e);var i=this.table,r=i.$el,o=i.highlightCurrentRow;if(r&&o){var s=e.data,a=r.querySelector("tbody").children,l=[].filter.call(a,function(e){return Object(C.c)(e,"el-table__row")}),u=l[s.indexOf(e.currentRow)];[].forEach.call(l,function(e){return Object(C.g)(e,"current-row")}),Object(C.a)(u,"current-row")}t&&t.silent||this.table.$emit("sort-change",{column:this.states.sortingColumn,prop:this.states.sortProp,order:this.states.sortOrder}),w.a.nextTick(function(){return n.table.updateScrollY()})},sort:function(e,t){var n=this,i=t.prop,r=t.order;i&&(e.sortProp=i,e.sortOrder=r||"ascending",w.a.nextTick(function(){for(var t=0,i=e.columns.length;t0&&t[0]&&"selection"===t[0].type&&!t[0].fixed&&(t[0].fixed=!0,e.fixedColumns.unshift(t[0]));var n=t.filter(function(e){return!e.fixed});e.originColumns=[].concat(e.fixedColumns).concat(n).concat(e.rightFixedColumns);var i=Tn(n),r=Tn(e.fixedColumns),o=Tn(e.rightFixedColumns);e.leafColumnsLength=i.length,e.fixedLeafColumnsLength=r.length,e.rightFixedLeafColumnsLength=o.length,e.columns=[].concat(r).concat(i).concat(o),e.isComplex=e.fixedColumns.length>0||e.rightFixedColumns.length>0},jn.prototype.isSelected=function(e){return(this.states.selection||[]).indexOf(e)>-1},jn.prototype.clearSelection=function(){var e=this.states;e.isAllSelected=!1;var t=e.selection;e.selection.length&&(e.selection=[]),t.length>0&&this.table.$emit("selection-change",e.selection?e.selection.slice():[])},jn.prototype.setExpandRowKeys=function(e){var t=[],n=this.states.data,i=this.states.rowKey;if(!i)throw new Error("[Table] prop row-key should not be empty.");var r=In(n,i);e.forEach(function(e){var n=r[e];n&&t.push(n.row)}),this.states.expandRows=t},jn.prototype.toggleRowSelection=function(e,t){kn(this.states,e,t)&&this.table.$emit("selection-change",this.states.selection?this.states.selection.slice():[])},jn.prototype.toggleRowExpansion=function(e,t){(function(e,t,n){var i=!1,r=e.expandRows;if(void 0!==n){var o=r.indexOf(t);n?-1===o&&(r.push(t),i=!0):-1!==o&&(r.splice(o,1),i=!0)}else{var s=r.indexOf(t);-1===s?(r.push(t),i=!0):(r.splice(s,1),i=!0)}return i})(this.states,e,t)&&(this.table.$emit("expand-change",e,this.states.expandRows),this.scheduleLayout())},jn.prototype.isRowExpanded=function(e){var t=this.states,n=t.expandRows,i=void 0===n?[]:n,r=t.rowKey;return r?!!In(i,r)[Dn(e,r)]:-1!==i.indexOf(e)},jn.prototype.cleanSelection=function(){var e=this.states.selection||[],t=this.states.data,n=this.states.rowKey,i=void 0;if(n){i=[];var r=In(e,n),o=In(t,n);for(var s in r)r.hasOwnProperty(s)&&!o[s]&&i.push(r[s].row)}else i=e.filter(function(e){return-1===t.indexOf(e)});i.forEach(function(t){e.splice(e.indexOf(t),1)}),i.length&&this.table.$emit("selection-change",e?e.slice():[])},jn.prototype.clearFilter=function(e){var t=this.states,n=this.table.$refs,i=n.tableHeader,r=n.fixedTableHeader,o=n.rightFixedTableHeader,s={};i&&(s=g(s,i.filterPanels)),r&&(s=g(s,r.filterPanels)),o&&(s=g(s,o.filterPanels));var a=Object.keys(s);if(a.length)if("string"==typeof e&&(e=[e]),Array.isArray(e)){var l=e.map(function(e){return function(e,t){for(var n=null,i=0;i1?n-1:0),r=1;rthis.bodyHeight}}},e.prototype.setHeight=function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"height";if(!w.a.prototype.$isServer){var i=this.table.$el;if("string"==typeof e&&/^\d+$/.test(e)&&(e=Number(e)),this.height=e,!i&&(e||0===e))return w.a.nextTick(function(){return t.setHeight(e,n)});"number"==typeof e?(i.style[n]=e+"px",this.updateElsHeight()):"string"==typeof e&&(i.style[n]=e,this.updateElsHeight())}},e.prototype.setMaxHeight=function(e){return this.setHeight(e,"max-height")},e.prototype.updateElsHeight=function(){var e=this;if(!this.table.$ready)return w.a.nextTick(function(){return e.updateElsHeight()});var t=this.table.$refs,n=t.headerWrapper,i=t.appendWrapper,r=t.footerWrapper;if(this.appendHeight=i?i.offsetHeight:0,!this.showHeader||n){var o=this.headerHeight=this.showHeader?n.offsetHeight:0;if(this.showHeader&&n.offsetWidth>0&&(this.table.columns||[]).length>0&&o<2)return w.a.nextTick(function(){return e.updateElsHeight()});var s=this.tableHeight=this.table.$el.clientHeight;if(null!==this.height&&(!isNaN(this.height)||"string"==typeof this.height)){var a=this.footerHeight=r?r.offsetHeight:0;this.bodyHeight=s-o-a+(r?1:0)}this.fixedBodyHeight=this.scrollX?this.bodyHeight-this.gutterWidth:this.bodyHeight;var l=!this.table.data||0===this.table.data.length;this.viewportHeight=this.scrollX?s-(l?0:this.gutterWidth):s,this.updateScrollY(),this.notifyObservers("scrollable")}},e.prototype.getFlattenColumns=function(){var e=[];return this.table.columns.forEach(function(t){t.isColumnGroup?e.push.apply(e,t.columns):e.push(t)}),e},e.prototype.updateColumnsWidth=function(){if(!w.a.prototype.$isServer){var e=this.fit,t=this.table.$el.clientWidth,n=0,i=this.getFlattenColumns(),r=i.filter(function(e){return"number"!=typeof e.width});if(i.forEach(function(e){"number"==typeof e.width&&e.realWidth&&(e.realWidth=null)}),r.length>0&&e){i.forEach(function(e){n+=e.width||e.minWidth||80});var o=this.scrollY?this.gutterWidth:0;if(n<=t-o){this.scrollX=!1;var s=t-o-n;if(1===r.length)r[0].realWidth=(r[0].minWidth||80)+s;else{var a=s/r.reduce(function(e,t){return e+(t.minWidth||80)},0),l=0;r.forEach(function(e,t){if(0!==t){var n=Math.floor((e.minWidth||80)*a);l+=n,e.realWidth=(e.minWidth||80)+n}}),r[0].realWidth=(r[0].minWidth||80)+s-l}}else this.scrollX=!0,r.forEach(function(e){e.realWidth=e.minWidth});this.bodyWidth=Math.max(n,t),this.table.resizeState.width=this.bodyWidth}else i.forEach(function(e){e.width||e.minWidth?e.realWidth=e.width||e.minWidth:e.realWidth=80,n+=e.realWidth}),this.scrollX=n>t,this.bodyWidth=n;var u=this.store.states.fixedColumns;if(u.length>0){var c=0;u.forEach(function(e){c+=e.realWidth||e.width}),this.fixedWidth=c}var h=this.store.states.rightFixedColumns;if(h.length>0){var d=0;h.forEach(function(e){d+=e.realWidth||e.width}),this.rightFixedWidth=d}this.notifyObservers("columns")}},e.prototype.addObserver=function(e){this.observers.push(e)},e.prototype.removeObserver=function(e){var t=this.observers.indexOf(e);-1!==t&&this.observers.splice(t,1)},e.prototype.notifyObservers=function(e){var t=this;this.observers.forEach(function(n){switch(e){case"columns":n.onColumnsChange(t);break;case"scrollable":n.onScrollableChange(t);break;default:throw new Error("Table Layout don't have event "+e+".")}})},e}(),On={created:function(){this.tableLayout.addObserver(this)},destroyed:function(){this.tableLayout.removeObserver(this)},computed:{tableLayout:function(){var e=this.layout;if(!e&&this.table&&(e=this.table.layout),!e)throw new Error("Can not find table layout.");return e}},mounted:function(){this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout)},updated:function(){this.__updated__||(this.onColumnsChange(this.tableLayout),this.onScrollableChange(this.tableLayout),this.__updated__=!0)},methods:{onColumnsChange:function(){var e=this.$el.querySelectorAll("colgroup > col");if(e.length){var t=this.tableLayout.getFlattenColumns(),n={};t.forEach(function(e){n[e.id]=e});for(var i=0,r=e.length;i col[name=gutter]"),n=0,i=t.length;n=this.leftFixedLeafCount:"right"===this.fixed?e=this.columnsCount-this.rightFixedLeafCount},getSpan:function(e,t,n,i){var r=1,o=1,s=this.table.spanMethod;if("function"==typeof s){var a=s({row:e,column:t,rowIndex:n,columnIndex:i});Array.isArray(a)?(r=a[0],o=a[1]):"object"===(void 0===a?"undefined":An(a))&&(r=a.rowspan,o=a.colspan)}return{rowspan:r,colspan:o}},getRowStyle:function(e,t){var n=this.table.rowStyle;return"function"==typeof n?n.call(null,{row:e,rowIndex:t}):n},getRowClass:function(e,t){var n=["el-table__row"];this.table.highlightCurrentRow&&e===this.store.states.currentRow&&n.push("current-row"),this.stripe&&t%2==1&&n.push("el-table__row--striped");var i=this.table.rowClassName;return"string"==typeof i?n.push(i):"function"==typeof i&&n.push(i.call(null,{row:e,rowIndex:t})),this.store.states.expandRows.indexOf(e)>-1&&n.push("expanded"),n.join(" ")},getCellStyle:function(e,t,n,i){var r=this.table.cellStyle;return"function"==typeof r?r.call(null,{rowIndex:e,columnIndex:t,row:n,column:i}):r},getCellClass:function(e,t,n,i){var r=[i.id,i.align,i.className];this.isColumnHidden(t)&&r.push("is-hidden");var o=this.table.cellClassName;return"string"==typeof o?r.push(o):"function"==typeof o&&r.push(o.call(null,{rowIndex:e,columnIndex:t,row:n,column:i})),r.join(" ")},handleCellMouseEnter:function(e,t){var n=this.table,i=Mn(e);if(i){var r=Nn(n,i),o=n.hoverState={cell:i,column:r,row:t};n.$emit("cell-mouse-enter",o.row,o.column,o.cell,e)}var s=e.target.querySelector(".cell");if(Object(C.c)(s,"el-tooltip")&&s.childNodes.length){var a=document.createRange();if(a.setStart(s,0),a.setEnd(s,s.childNodes.length),(a.getBoundingClientRect().width+((parseInt(Object(C.b)(s,"paddingLeft"),10)||0)+(parseInt(Object(C.b)(s,"paddingRight"),10)||0))>s.offsetWidth||s.scrollWidth>s.offsetWidth)&&this.$refs.tooltip){var l=this.$refs.tooltip;this.tooltipContent=i.innerText||i.textContent,l.referenceElm=i,l.$refs.popper&&(l.$refs.popper.style.display="none"),l.doDestroy(),l.setExpectedState(!0),this.activateTooltip(l)}}},handleCellMouseLeave:function(e){var t=this.$refs.tooltip;if(t&&(t.setExpectedState(!1),t.handleClosePopper()),Mn(e)){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,n){var i=this.table,r=Mn(e),o=void 0;r&&(o=Nn(i,r))&&i.$emit("cell-"+n,t,o,r,e),i.$emit("row-"+n,t,e,o)},handleExpandClick:function(e,t){t.stopPropagation(),this.store.toggleRowExpansion(e)}}},zn=[];!w.a.prototype.$isServer&&document.addEventListener("click",function(e){zn.forEach(function(t){var n=e.target;t&&t.$el&&(n===t.$el||t.$el.contains(n)||t.handleOutsideClick&&t.handleOutsideClick(e))})});var $n=function(e){e&&zn.push(e)},Pn=function(e){-1!==zn.indexOf(e)&&zn.splice(e,1)},Fn={name:"ElTableFilterPanel",mixins:[$,c],directives:{Clickoutside:pe},components:{ElCheckbox:Kt,ElCheckboxGroup:sn},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(){var e=this;setTimeout(function(){e.showPopper=!1},16)},handleConfirm:function(){this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleReset:function(){this.filteredValue=[],this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleSelect:function(e){this.filterValue=e,null!=e?this.confirmFilter(this.filteredValue):this.confirmFilter([]),this.handleOutsideClick()},confirmFilter:function(e){this.table.store.commit("filterChange",{column:this.column,values:e}),this.table.store.updateAllSelected()}},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&&(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?$n(e):Pn(e)})},watch:{showPopper:function(e){!0===e&&parseInt(this.popperJS._popper.style.zIndex,10)1;return r&&(this.$parent.isGroup=!0),e("table",{class:"el-table__header",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id}})}),this.hasGutter?e("col",{attrs:{name:"gutter"}}):""]),e("thead",{class:[{"is-group":r,"has-gutter":this.hasGutter}]},[this._l(i,function(n,i){return e("tr",{style:t.getHeaderRowStyle(i),class:t.getHeaderRowClass(i)},[t._l(n,function(r,o){return e("th",{attrs:{colspan:r.colSpan,rowspan:r.rowSpan},on:{mousemove:function(e){return t.handleMouseMove(e,r)},mouseout:t.handleMouseOut,mousedown:function(e){return t.handleMouseDown(e,r)},click:function(e){return t.handleHeaderClick(e,r)},contextmenu:function(e){return t.handleHeaderContextMenu(e,r)}},style:t.getHeaderCellStyle(i,o,n,r),class:t.getHeaderCellClass(i,o,n,r),key:r.id},[e("div",{class:["cell",r.filteredValue&&r.filteredValue.length>0?"highlight":"",r.labelClassName]},[r.renderHeader?r.renderHeader.call(t._renderProxy,e,{column:r,$index:o,store:t.store,_self:t.$parent.$vnode.context}):r.label,r.sortable?e("span",{class:"caret-wrapper",on:{click:function(e){return t.handleSortClick(e,r)}}},[e("i",{class:"sort-caret ascending",on:{click:function(e){return t.handleSortClick(e,r,"ascending")}}}),e("i",{class:"sort-caret descending",on:{click:function(e){return t.handleSortClick(e,r,"descending")}}})]):"",r.filterable?e("span",{class:"el-table__column-filter-trigger",on:{click:function(e){return t.handleFilterClick(e,r)}}},[e("i",{class:["el-icon-arrow-down",r.filterOpened?"el-icon-arrow-up":""]})]):""])])}),t.hasGutter?e("th",{class:"gutter"}):""])})])])},props:{fixed:String,store:{required:!0},border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},components:{ElCheckbox:Kt,ElTag:q},computed:{table:function(){return this.$parent},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},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},created:function(){this.filterPanels={}},mounted:function(){var e=this.defaultSort,t=e.prop,n=e.order;this.store.commit("sort",{prop:t,order:n})},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){for(var n=0,i=0;i=this.leftFixedLeafCount:"right"===this.fixed?n=this.columnsCount-this.rightFixedLeafCount},getHeaderRowStyle:function(e){var t=this.table.headerRowStyle;return"function"==typeof t?t.call(null,{rowIndex:e}):t},getHeaderRowClass:function(e){var t=[],n=this.table.headerRowClassName;return"string"==typeof n?t.push(n):"function"==typeof n&&t.push(n.call(null,{rowIndex:e})),t.join(" ")},getHeaderCellStyle:function(e,t,n,i){var r=this.table.headerCellStyle;return"function"==typeof r?r.call(null,{rowIndex:e,columnIndex:t,row:n,column:i}):r},getHeaderCellClass:function(e,t,n,i){var r=[i.id,i.order,i.headerAlign,i.className,i.labelClassName];0===e&&this.isCellHidden(t,n)&&r.push("is-hidden"),i.children||r.push("is-leaf"),i.sortable&&r.push("is-sortable");var o=this.table.headerCellClassName;return"string"==typeof o?r.push(o):"function"==typeof o&&r.push(o.call(null,{rowIndex:e,columnIndex:t,row:n,column:i})),r.join(" ")},toggleAllSelection:function(e){e.stopPropagation(),this.store.commit("toggleAllSelection")},handleFilterClick:function(e,t){e.stopPropagation();var n=e.target,i="TH"===n.tagName?n:n.parentNode;i=i.querySelector(".el-table__column-filter-trigger")||i;var r=this.$parent,o=this.filterPanels[t.id];o&&t.filterOpened?o.showPopper=!1:(o||(o=new w.a(Yn),this.filterPanels[t.id]=o,t.filterPlacement&&(o.placement=t.filterPlacement),o.table=r,o.cell=i,o.column=t,!this.$isServer&&o.$mount(document.createElement("div"))),setTimeout(function(){o.showPopper=!0},16))},handleHeaderClick:function(e,t){!t.filters&&t.sortable?this.handleSortClick(e,t):t.filterable&&!t.sortable&&this.handleFilterClick(e,t),this.$parent.$emit("header-click",t,e)},handleHeaderContextMenu:function(e,t){this.$parent.$emit("header-contextmenu",t,e)},handleMouseDown:function(e,t){var n=this;if(!this.$isServer&&!(t.children&&t.children.length>0)&&this.draggingColumn&&this.border){this.dragging=!0,this.$parent.resizeProxyVisible=!0;var i=this.$parent,r=i.$el.getBoundingClientRect().left,o=this.$el.querySelector("th."+t.id),s=o.getBoundingClientRect(),a=s.left-r+30;Object(C.a)(o,"noclick"),this.dragState={startMouseLeft:e.clientX,startLeft:s.right-r,startColumnLeft:s.left-r,tableLeft:r};var l=i.$refs.resizeProxy;l.style.left=this.dragState.startLeft+"px",document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var u=function(e){var t=e.clientX-n.dragState.startMouseLeft,i=n.dragState.startLeft+t;l.style.left=Math.max(a,i)+"px"};document.addEventListener("mousemove",u),document.addEventListener("mouseup",function r(){if(n.dragging){var s=n.dragState,a=s.startColumnLeft,c=s.startLeft,h=parseInt(l.style.left,10)-a;t.width=t.realWidth=h,i.$emit("header-dragend",t.width,c-a,t,e),n.store.scheduleLayout(),document.body.style.cursor="",n.dragging=!1,n.draggingColumn=null,n.dragState={},i.resizeProxyVisible=!1}document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",r),document.onselectstart=null,document.ondragstart=null,setTimeout(function(){Object(C.g)(o,"noclick")},0)})}},handleMouseMove:function(e,t){if(!(t.children&&t.children.length>0)){for(var n=e.target;n&&"TH"!==n.tagName;)n=n.parentNode;if(t&&t.resizable&&!this.dragging&&this.border){var i=n.getBoundingClientRect(),r=document.body.style;i.width>12&&i.right-e.pageX<8?(r.cursor="col-resize",Object(C.c)(n,"is-sortable")&&(n.style.cursor="col-resize"),this.draggingColumn=t):this.dragging||(r.cursor="",Object(C.c)(n,"is-sortable")&&(n.style.cursor="pointer"),this.draggingColumn=null)}}},handleMouseOut:function(){this.$isServer||(document.body.style.cursor="")},toggleOrder:function(e){var t=e.order,n=e.sortOrders;if(""===t)return n[0];var i=n.indexOf(t||null);return n[i>n.length-2?0:i+1]},handleSortClick:function(e,t,n){e.stopPropagation();for(var i=t.order===n?null:n||this.toggleOrder(t),r=e.target;r&&"TH"!==r.tagName;)r=r.parentNode;if(r&&"TH"===r.tagName&&Object(C.c)(r,"noclick"))Object(C.g)(r,"noclick");else if(t.sortable){var o=this.store.states,s=o.sortProp,a=void 0,l=o.sortingColumn;(l!==t||l===t&&null===l.order)&&(l&&(l.order=null),o.sortingColumn=t,s=t.property),i?a=t.order=i:(a=t.order=null,o.sortingColumn=null,s=null),o.sortProp=s,o.sortOrder=a,this.store.commit("changeSortCondition")}}},data:function(){return{draggingColumn:null,dragging:!1,dragState:{}}}},Qn={name:"ElTableFooter",mixins:[On],render:function(e){var t=this,n=[];return this.summaryMethod?n=this.summaryMethod({columns:this.columns,data:this.store.states.data}):this.columns.forEach(function(e,i){if(0!==i){var r=t.store.states.data.map(function(t){return Number(t[e.property])}),o=[],s=!0;r.forEach(function(e){if(!isNaN(e)){s=!1;var t=(""+e).split(".")[1];o.push(t?t.length:0)}});var a=Math.max.apply(null,o);n[i]=s?"":r.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:parseFloat((e+t).toFixed(Math.min(a,20)))},0)}else n[i]=t.sumText}),e("table",{class:"el-table__footer",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id}})}),this.hasGutter?e("col",{attrs:{name:"gutter"}}):""]),e("tbody",{class:[{"has-gutter":this.hasGutter}]},[e("tr",[this._l(this.columns,function(i,r){return e("td",{attrs:{colspan:i.colSpan,rowspan:i.rowSpan},class:[i.id,i.headerAlign,i.className||"",t.isCellHidden(r,t.columns,i)?"is-hidden":"",i.children?"":"is-leaf",i.labelClassName]},[e("div",{class:["cell",i.labelClassName]},[n[r]])])}),this.hasGutter?e("th",{class:"gutter"}):""])])])},props:{fixed:String,store:{required:!0},summaryMethod:Function,sumText:String,border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},computed:{table:function(){return this.$parent},isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},leftFixedLeafCount:function(){return this.store.states.fixedLeafColumnsLength},rightFixedLeafCount:function(){return this.store.states.rightFixedLeafColumnsLength},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.tableLayout.gutterWidth}},methods:{isCellHidden:function(e,t,n){if(!0===this.fixed||"left"===this.fixed)return e>=this.leftFixedLeafCount;if("right"===this.fixed){for(var i=0,r=0;r=this.columnsCount-this.rightFixedCount)}}},Vn=1,Hn={name:"ElTable",mixins:[c,h],directives:{Mousewheel:yn},props:{data:{type:Array,default:function(){return[]}},size:String,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],cellClassName:[String,Function],cellStyle:[Object,Function],headerRowClassName:[String,Function],headerRowStyle:[Object,Function],headerCellClassName:[String,Function],headerCellStyle:[Object,Function],highlightCurrentRow:Boolean,currentRowKey:[String,Number],emptyText:String,expandRowKeys:Array,defaultExpandAll:Boolean,defaultSort:Object,tooltipEffect:String,spanMethod:Function,selectOnIndeterminate:{type:Boolean,default:!0}},components:{TableHeader:Bn,TableFooter:Qn,TableBody:En,ElCheckbox:Kt},methods:{getMigratingConfig:function(){return{events:{expand:"expand is renamed to expand-change"}}},setCurrentRow:function(e){this.store.commit("setCurrentRow",e)},toggleRowSelection:function(e,t){this.store.toggleRowSelection(e,t),this.store.updateAllSelected()},toggleRowExpansion:function(e,t){this.store.toggleRowExpansion(e,t)},clearSelection:function(){this.store.clearSelection()},clearFilter:function(e){this.store.clearFilter(e)},clearSort:function(){this.store.clearSort()},handleMouseLeave:function(){this.store.commit("setHoverRow",null),this.hoverState&&(this.hoverState=null)},updateScrollY:function(){this.layout.updateScrollY(),this.layout.updateColumnsWidth()},handleFixedMousewheel:function(e,t){var n=this.bodyWrapper;if(Math.abs(t.spinY)>0){var i=n.scrollTop;t.pixelY<0&&0!==i&&e.preventDefault(),t.pixelY>0&&n.scrollHeight-n.clientHeight>i&&e.preventDefault(),n.scrollTop+=Math.ceil(t.pixelY/5)}else n.scrollLeft+=Math.ceil(t.pixelX/5)},handleHeaderFooterMousewheel:function(e,t){var n=t.pixelX,i=t.pixelY;Math.abs(n)>=Math.abs(i)&&(e.preventDefault(),this.bodyWrapper.scrollLeft+=t.pixelX/5)},bindEvents:function(){var e=this.$refs,t=e.headerWrapper,n=e.footerWrapper,i=this.$refs,r=this;this.bodyWrapper.addEventListener("scroll",function(){t&&(t.scrollLeft=this.scrollLeft),n&&(n.scrollLeft=this.scrollLeft),i.fixedBodyWrapper&&(i.fixedBodyWrapper.scrollTop=this.scrollTop),i.rightFixedBodyWrapper&&(i.rightFixedBodyWrapper.scrollTop=this.scrollTop);var e=this.scrollWidth-this.offsetWidth-1,o=this.scrollLeft;r.scrollPosition=o>=e?"right":0===o?"left":"middle"}),this.fit&&X(this.$el,this.resizeListener)},resizeListener:function(){if(this.$ready){var e=!1,t=this.$el,n=this.resizeState,i=n.width,r=n.height,o=t.offsetWidth;i!==o&&(e=!0);var s=t.offsetHeight;(this.height||this.shouldUpdateHeight)&&r!==s&&(e=!0),e&&(this.resizeState.width=o,this.resizeState.height=s,this.doLayout())}},doLayout:function(){this.layout.updateColumnsWidth(),this.shouldUpdateHeight&&this.layout.updateElsHeight()},sort:function(e,t){this.store.commit("sort",{prop:e,order:t})},toggleAllSelection:function(){this.store.commit("toggleAllSelection")}},created:function(){var e=this;this.tableId="el-table_"+Vn++,this.debouncedUpdateLayout=ae()(50,function(){return e.doLayout()})},computed:{tableSize:function(){return this.size||(this.$ELEMENT||{}).size},bodyWrapper:function(){return this.$refs.bodyWrapper},shouldUpdateHeight:function(){return this.height||this.maxHeight||this.fixedColumns.length>0||this.rightFixedColumns.length>0},selection:function(){return this.store.states.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},bodyWidth:function(){var e=this.layout,t=e.bodyWidth,n=e.scrollY,i=e.gutterWidth;return t?t-(n?i:0)+"px":""},bodyHeight:function(){return this.height?{height:this.layout.bodyHeight?this.layout.bodyHeight+"px":""}:this.maxHeight?{"max-height":(this.showHeader?this.maxHeight-this.layout.headerHeight-this.layout.footerHeight:this.maxHeight-this.layout.footerHeight)+"px"}:{}},fixedBodyHeight:function(){if(this.height)return{height:this.layout.fixedBodyHeight?this.layout.fixedBodyHeight+"px":""};if(this.maxHeight){var e=this.layout.scrollX?this.maxHeight-this.layout.gutterWidth:this.maxHeight;return this.showHeader&&(e-=this.layout.headerHeight),{"max-height":(e-=this.layout.footerHeight)+"px"}}return{}},fixedHeight:function(){return this.maxHeight?this.showSummary?{bottom:0}:{bottom:this.layout.scrollX&&this.data.length?this.layout.gutterWidth+"px":""}:this.showSummary?{height:this.layout.tableHeight?this.layout.tableHeight+"px":""}:{height:this.layout.viewportHeight?this.layout.viewportHeight+"px":""}}},watch:{height:{immediate:!0,handler:function(e){this.layout.setHeight(e)}},maxHeight:{immediate:!0,handler:function(e){this.layout.setMaxHeight(e)}},currentRowKey:function(e){this.store.setCurrentRowKey(e)},data:{immediate:!0,handler:function(e){var t=this;this.store.commit("setData",e),this.$ready&&this.$nextTick(function(){t.doLayout()})}},expandRowKeys:{immediate:!0,handler:function(e){e&&this.store.setExpandRowKeys(e)}}},destroyed:function(){this.resizeListener&&ee(this.$el,this.resizeListener)},mounted:function(){var e=this;this.bindEvents(),this.store.updateColumns(),this.doLayout(),this.resizeState={width:this.$el.offsetWidth,height:this.$el.offsetHeight},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 Sn(this,{rowKey:this.rowKey,defaultExpandAll:this.defaultExpandAll,selectOnIndeterminate:this.selectOnIndeterminate});return{layout:new Ln({store:e,table:this,fit:this.fit,showHeader:this.showHeader}),store:e,isHidden:!1,renderExpanded:null,resizeProxyVisible:!1,resizeState:{width:null,height:null},isGroup:!1,scrollPosition:"left"}}},Wn=Object(r.a)(Hn,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-table",class:[{"el-table--fit":e.fit,"el-table--striped":e.stripe,"el-table--border":e.border||e.isGroup,"el-table--hidden":e.isHidden,"el-table--group":e.isGroup,"el-table--fluid-height":e.maxHeight,"el-table--scrollable-x":e.layout.scrollX,"el-table--scrollable-y":e.layout.scrollY,"el-table--enable-row-hover":!e.store.states.isComplex,"el-table--enable-row-transition":0!==(e.store.states.data||[]).length&&(e.store.states.data||[]).length<100},e.tableSize?"el-table--"+e.tableSize:""],on:{mouseleave:function(t){e.handleMouseLeave(t)}}},[n("div",{ref:"hiddenColumns",staticClass:"hidden-columns"},[e._t("default")],2),e.showHeader?n("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:e.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"headerWrapper",staticClass:"el-table__header-wrapper"},[n("table-header",{ref:"tableHeader",style:{width:e.layout.bodyWidth?e.layout.bodyWidth+"px":""},attrs:{store:e.store,border:e.border,"default-sort":e.defaultSort}})],1):e._e(),n("div",{ref:"bodyWrapper",staticClass:"el-table__body-wrapper",class:[e.layout.scrollX?"is-scrolling-"+e.scrollPosition:"is-scrolling-none"],style:[e.bodyHeight]},[n("table-body",{style:{width:e.bodyWidth},attrs:{context:e.context,store:e.store,stripe:e.stripe,"row-class-name":e.rowClassName,"row-style":e.rowStyle,highlight:e.highlightCurrentRow}}),e.data&&0!==e.data.length?e._e():n("div",{ref:"emptyBlock",staticClass:"el-table__empty-block",style:{width:e.bodyWidth}},[n("span",{staticClass:"el-table__empty-text"},[e._t("empty",[e._v(e._s(e.emptyText||e.t("el.table.emptyText")))])],2)]),e.$slots.append?n("div",{ref:"appendWrapper",staticClass:"el-table__append-wrapper"},[e._t("append")],2):e._e()],1),e.showSummary?n("div",{directives:[{name:"show",rawName:"v-show",value:e.data&&e.data.length>0,expression:"data && data.length > 0"},{name:"mousewheel",rawName:"v-mousewheel",value:e.handleHeaderFooterMousewheel,expression:"handleHeaderFooterMousewheel"}],ref:"footerWrapper",staticClass:"el-table__footer-wrapper"},[n("table-footer",{style:{width:e.layout.bodyWidth?e.layout.bodyWidth+"px":""},attrs:{store:e.store,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?n("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:e.handleFixedMousewheel,expression:"handleFixedMousewheel"}],ref:"fixedWrapper",staticClass:"el-table__fixed",style:[{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},e.fixedHeight]},[e.showHeader?n("div",{ref:"fixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[n("table-header",{ref:"fixedTableHeader",style:{width:e.bodyWidth},attrs:{fixed:"left",border:e.border,store:e.store}})],1):e._e(),n("div",{ref:"fixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:e.layout.headerHeight+"px"},e.fixedBodyHeight]},[n("table-body",{style:{width:e.bodyWidth},attrs:{fixed:"left",store:e.store,stripe:e.stripe,highlight:e.highlightCurrentRow,"row-class-name":e.rowClassName,"row-style":e.rowStyle}}),e.$slots.append?n("div",{staticClass:"el-table__append-gutter",style:{height:e.layout.appendHeight+"px"}}):e._e()],1),e.showSummary?n("div",{directives:[{name:"show",rawName:"v-show",value:e.data&&e.data.length>0,expression:"data && data.length > 0"}],ref:"fixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[n("table-footer",{style:{width:e.bodyWidth},attrs:{fixed:"left",border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,store:e.store}})],1):e._e()]):e._e(),e.rightFixedColumns.length>0?n("div",{directives:[{name:"mousewheel",rawName:"v-mousewheel",value:e.handleFixedMousewheel,expression:"handleFixedMousewheel"}],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||0)+"px":""},e.fixedHeight]},[e.showHeader?n("div",{ref:"rightFixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[n("table-header",{ref:"rightFixedTableHeader",style:{width:e.bodyWidth},attrs:{fixed:"right",border:e.border,store:e.store}})],1):e._e(),n("div",{ref:"rightFixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:e.layout.headerHeight+"px"},e.fixedBodyHeight]},[n("table-body",{style:{width:e.bodyWidth},attrs:{fixed:"right",store:e.store,stripe:e.stripe,"row-class-name":e.rowClassName,"row-style":e.rowStyle,highlight:e.highlightCurrentRow}})],1),e.showSummary?n("div",{directives:[{name:"show",rawName:"v-show",value:e.data&&e.data.length>0,expression:"data && data.length > 0"}],ref:"rightFixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[n("table-footer",{style:{width:e.bodyWidth},attrs:{fixed:"right",border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,store:e.store}})],1):e._e()]):e._e(),e.rightFixedColumns.length>0?n("div",{ref:"rightFixedPatch",staticClass:"el-table__fixed-right-patch",style:{width:e.layout.scrollY?e.layout.gutterWidth+"px":"0",height:e.layout.headerHeight+"px"}}):e._e(),n("div",{directives:[{name:"show",rawName:"v-show",value:e.resizeProxyVisible,expression:"resizeProxyVisible"}],ref:"resizeProxy",staticClass:"el-table__column-resize-proxy"})])},[],!1,null,null,null);Wn.options.__file="table.vue";var Gn=Wn.exports;Gn.install=function(e){e.component(Gn.name,Gn)};var qn=Gn,Zn=1,Kn={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:""}},Jn={selection:{renderHeader:function(e,t){var n=t.store;return e("el-checkbox",{attrs:{disabled:n.states.data&&0===n.states.data.length,indeterminate:n.states.selection.length>0&&!this.isAllSelected,value:this.isAllSelected},nativeOn:{click:this.toggleAllSelection}})},renderCell:function(e,t){var n=t.row,i=t.column,r=t.store,o=t.$index;return e("el-checkbox",{nativeOn:{click:function(e){return e.stopPropagation()}},attrs:{value:r.isSelected(n),disabled:!!i.selectable&&!i.selectable.call(null,n,o)},on:{input:function(){r.commit("rowSelectedChanged",n)}}})},sortable:!1,resizable:!1},index:{renderHeader:function(e,t){return t.column.label||"#"},renderCell:function(e,t){var n=t.$index,i=n+1,r=t.column.index;return"number"==typeof r?i=n+r:"function"==typeof r&&(i=r(n)),e("div",[i])},sortable:!1},expand:{renderHeader:function(e,t){return t.column.label||""},renderCell:function(e,t,n){var i=t.row;return e("div",{class:"el-table__expand-icon "+(t.store.states.expandRows.indexOf(i)>-1?"el-table__expand-icon--expanded":""),on:{click:function(e){return n.handleExpandClick(i,e)}}},[e("i",{class:"el-icon el-icon-arrow-right"})])},sortable:!1,resizable:!1,className:"el-table__expand-column"}},Xn=function(e,t){var n=t.row,i=t.column,r=t.$index,o=i.property,s=o&&Object(Y.f)(n,o).v;return i&&i.formatter?i.formatter(n,i,s,r):s},ei=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=null)),e},ti=function(e){return void 0!==e&&(e=parseInt(e,10),isNaN(e)&&(e=80)),e},ni={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,sortBy:[String,Function,Array],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,filterPlacement:String,filterMultiple:{type:Boolean,default:!0},index:[Number,Function],sortOrders:{type:Array,default:function(){return["ascending","descending",null]},validator:function(e){return e.every(function(e){return["ascending","descending",null].indexOf(e)>-1})}}},data:function(){return{isSubColumn:!1,columns:[]}},beforeCreate:function(){this.row={},this.column={},this.$index=0},components:{ElCheckbox:Kt,ElTag:q},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e},columnOrTableParent:function(){for(var e=this.$parent;e&&!e.tableId&&!e.columnId;)e=e.$parent;return e}},created:function(){var e=this;this.$createElement;this.customRender=this.$options.render,this.$options.render=function(t){return t("div",e.$slots.default)};var t=this.columnOrTableParent,n=this.owner;this.isSubColumn=n!==t,this.columnId=(t.tableId||t.columnId)+"_column_"+Zn++;var i=this.type,r=ei(this.width),o=ti(this.minWidth),s=function(e,t){var n={};for(var i in g(n,Kn[e||"default"]),t)if(t.hasOwnProperty(i)){var r=t[i];void 0!==r&&(n[i]=r)}return n.minWidth||(n.minWidth=80),n.realWidth=void 0===n.width?n.minWidth:n.width,n}(i,{id:this.columnId,columnKey:this.columnKey,label:this.label,className:this.className,labelClassName:this.labelClassName,property:this.prop||this.property,type:i,renderCell:null,renderHeader:this.renderHeader,minWidth:o,width:r,isColumnGroup:!1,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,sortBy:this.sortBy,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||[],filterPlacement:this.filterPlacement||"",index:this.index,sortOrders:this.sortOrders}),a=Jn[i]||{};Object.keys(a).forEach(function(e){var t=a[e];void 0!==t&&("renderHeader"===e&&("selection"===i&&s[e]?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set render-header function."):t=s[e]||t),s[e]="className"===e?s[e]+" "+t:t)}),this.renderHeader&&console.warn("[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header."),this.columnConfig=s;var l=s.renderCell,u=this;if("expand"===i)return n.renderExpanded=function(e,t){return u.$scopedSlots.default?u.$scopedSlots.default(t):u.$slots.default},void(s.renderCell=function(e,t){return e("div",{class:"cell"},[l(e,t,this._renderProxy)])});s.renderCell=function(e,t){return u.$scopedSlots.default&&(l=function(){return u.$scopedSlots.default(t)}),l||(l=Xn),u.showOverflowTooltip||u.showTooltipWhenOverflow?e("div",{class:"cell el-tooltip",style:{width:(t.column.realWidth||t.column.width)-1+"px"}},[l(e,t)]):e("div",{class:"cell"},[l(e,t)])}},destroyed:function(){if(this.$parent){var e=this.$parent;this.owner.store.commit("removeColumn",this.columnConfig,this.isSubColumn?e.columnConfig:null)}},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||this.align))},width:function(e){this.columnConfig&&(this.columnConfig.width=ei(e),this.owner.store.scheduleLayout())},minWidth:function(e){this.columnConfig&&(this.columnConfig.minWidth=ti(e),this.owner.store.scheduleLayout())},fixed:function(e){this.columnConfig&&(this.columnConfig.fixed=e,this.owner.store.scheduleLayout(!0))},sortable:function(e){this.columnConfig&&(this.columnConfig.sortable=e)},index:function(e){this.columnConfig&&(this.columnConfig.index=e)},formatter:function(e){this.columnConfig&&(this.columnConfig.formatter=e)},className:function(e){this.columnConfig&&(this.columnConfig.className=e)},labelClassName:function(e){this.columnConfig&&(this.columnConfig.labelClassName=e)}},mounted:function(){var e=this,t=this.owner,n=this.columnOrTableParent,i=void 0;i=this.isSubColumn?[].indexOf.call(n.$el.children,this.$el):[].indexOf.call(n.$refs.hiddenColumns.children,this.$el),this.$scopedSlots.header&&("selection"===this.type?console.warn("[Element Warn][TableColumn]Selection column doesn't allow to set scoped-slot header."):this.columnConfig.renderHeader=function(t,n){return e.$scopedSlots.header(n)}),t.store.commit("insertColumn",this.columnConfig,i,this.isSubColumn?n.columnConfig:null)},install:function(e){e.component(ni.name,ni)}},ii=ni,ri=n(21),oi=n.n(ri),si=["sun","mon","tue","wed","thu","fri","sat"],ai=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],li=function(){return{dayNamesShort:si.map(function(e){return Object(u.b)("el.datepicker.weeks."+e)}),dayNames:si.map(function(e){return Object(u.b)("el.datepicker.weeks."+e)}),monthNamesShort:ai.map(function(e){return Object(u.b)("el.datepicker.months."+e)}),monthNames:ai.map(function(e,t){return Object(u.b)("el.datepicker.month"+(t+1))}),amPm:["am","pm"]}},ui=function(e){return null!=e&&(!isNaN(new Date(e).getTime())&&!Array.isArray(e))},ci=function(e){return e instanceof Date},hi=function(e,t){return(e=function(e){return ui(e)?new Date(e):null}(e))?oi.a.format(e,t||"yyyy-MM-dd",li()):""},di=function(e,t){return oi.a.parse(e,t||"yyyy-MM-dd",li())},pi=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},fi=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()-t)},mi=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()+t)},gi=function(e){if(!ui(e))return null;var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var n=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-n.getTime())/864e5-3+(n.getDay()+6)%7)/7)};function vi(e,t,n,i){for(var r=t;r2&&void 0!==arguments[2]?arguments[2]:"HH:mm:ss";if(0===t.length)return e;var i=function(e){return oi.a.parse(oi.a.format(e,n),n)},r=i(e),o=t.map(function(e){return e.map(i)});if(o.some(function(e){return r>=e[0]&&r<=e[1]}))return e;var s=o[0][0],a=o[0][0];return o.forEach(function(e){s=new Date(Math.min(e[0],s)),a=new Date(Math.max(e[1],s))}),bi(r1&&void 0!==arguments[1]?arguments[1]:1,n=e.getFullYear(),i=e.getMonth();return _i(e,n-t,i)},Ti=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,n=e.getFullYear(),i=e.getMonth();return _i(e,n+t,i)},Si=function(e){return e.replace(/\W?m{1,2}|\W?ZZ/g,"").replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi,"").trim()},Li=function(e){return e.replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?y{2,4}/g,"").trim()},Oi={props:{appendToBody:$.props.appendToBody,offset:$.props.offset,boundariesPadding:$.props.boundariesPadding,arrowOffset:$.props.arrowOffset},methods:$.methods,data:function(){return g({visibleArrow:!0},$.data)},beforeDestroy:$.beforeDestroy},Ai={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"},Ei=["date","datetime","time","time-select","week","month","year","daterange","timerange","datetimerange","dates"],zi=function(e,t){return"timestamp"===t?e.getTime():hi(e,t)},$i=function(e,t){return"timestamp"===t?new Date(Number(e)):di(e,t)},Pi=function(e,t){if(Array.isArray(e)&&2===e.length){var n=e[0],i=e[1];if(n&&i)return[zi(n,t),zi(i,t)]}return""},Fi=function(e,t,n){if(Array.isArray(e)||(e=e.split(n)),2===e.length){var i=e[0],r=e[1];return[$i(i,t),$i(r,t)]}return[]},Ui={default:{formatter:function(e){return e?""+e:""},parser:function(e){return void 0===e||""===e?null:e}},week:{formatter:function(e,t){var n=gi(e),i=e.getMonth(),r=new Date(e);1===n&&11===i&&(r.setHours(0,0,0,0),r.setDate(r.getDate()+3-(r.getDay()+6)%7));var o=hi(r,t);return o=/WW/.test(o)?o.replace(/WW/,n<10?"0"+n:n):o.replace(/W/,n)},parser:function(e){var t=(e||"").split("w");if(2===t.length){var n=Number(t[0]),i=Number(t[1]);if(!isNaN(n)&&!isNaN(i)&&i<54)return e}return null}},date:{formatter:zi,parser:$i},datetime:{formatter:zi,parser:$i},daterange:{formatter:Pi,parser:Fi},datetimerange:{formatter:Pi,parser:Fi},timerange:{formatter:Pi,parser:Fi},time:{formatter:zi,parser:$i},month:{formatter:zi,parser:$i},year:{formatter:zi,parser:$i},number:{formatter:function(e){return e?""+e:""},parser:function(e){var t=Number(e);return isNaN(e)?null:t}},dates:{formatter:function(e,t){return e.map(function(e){return zi(e,t)})},parser:function(e,t){return("string"==typeof e?e.split(", "):e).map(function(e){return e instanceof Date?e:$i(e,t)})}}},Yi={left:"bottom-start",center:"bottom",right:"bottom-end"},Ri=function(e,t,n){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"-";return e?(0,(Ui[n]||Ui.default).parser)(e,t||Ai[n],i):null},Bi=function(e,t,n){return e?(0,(Ui[n]||Ui.default).formatter)(e,t||Ai[n]):null},Qi=function(e,t){var n=function(e,t){var n=e instanceof Date,i=t instanceof Date;return n&&i?e.getTime()===t.getTime():!n&&!i&&e===t},i=e instanceof Array,r=t instanceof Array;return i&&r?e.length===t.length&&e.every(function(e,i){return n(e,t[i])}):!i&&!r&&n(e,t)},Vi=function(e){return"string"==typeof e||e instanceof String},Hi=function(e){return null==e||Vi(e)||Array.isArray(e)&&2===e.length&&e.every(Vi)},Wi={mixins:[a,Oi],inject:{elForm:{default:""},elFormItem:{default:""}},props:{size:String,format:String,valueFormat:String,readonly:Boolean,placeholder:String,startPlaceholder:String,endPlaceholder:String,prefixIcon:String,clearIcon:{type:String,default:"el-icon-circle-close"},name:{default:"",validator:Hi},disabled:Boolean,clearable:{type:Boolean,default:!0},id:{default:"",validator:Hi},popperClass:String,editable:{type:Boolean,default:!0},align:{type:String,default:"left"},value:{},defaultValue:{},defaultTime:{},rangeSeparator:{default:"-"},pickerOptions:{},unlinkPanels:Boolean,validateEvent:{type:Boolean,default:!0}},components:{ElInput:M},directives:{Clickoutside:pe},data:function(){return{pickerVisible:!1,showClose:!1,userInput:null,valueOnOpen:null,unwatchPickerOptions:null}},watch:{pickerVisible:function(e){this.readonly||this.pickerDisabled||(e?(this.showPicker(),this.valueOnOpen=Array.isArray(this.value)?[].concat(this.value):this.value):(this.hidePicker(),this.emitChange(this.value),this.userInput=null,this.validateEvent&&this.dispatch("ElFormItem","el.form.blur"),this.$emit("blur",this),this.blur()))},parsedValue:{immediate:!0,handler:function(e){this.picker&&(this.picker.value=e)}},defaultValue:function(e){this.picker&&(this.picker.defaultValue=e)},value:function(e,t){Qi(e,t)||this.pickerVisible||!this.validateEvent||this.dispatch("ElFormItem","el.form.change",e)}},computed:{ranged:function(){return this.type.indexOf("range")>-1},reference:function(){var e=this.$refs.reference;return e.$el||e},refInput:function(){return this.reference?[].slice.call(this.reference.querySelectorAll("input")):[]},valueIsEmpty:function(){var e=this.value;if(Array.isArray(e)){for(var t=0,n=e.length;t0&&void 0!==arguments[0]?arguments[0]:"",n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];e.userInput=null,e.pickerVisible=e.picker.visible=n,e.emitInput(t),e.picker.resetView&&e.picker.resetView()}),this.picker.$on("select-range",function(t,n,i){0!==e.refInput.length&&(i&&"min"!==i?"max"===i&&(e.refInput[1].setSelectionRange(t,n),e.refInput[1].focus()):(e.refInput[0].setSelectionRange(t,n),e.refInput[0].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))},emitChange:function(e){Qi(e,this.valueOnOpen)||(this.$emit("change",e),this.valueOnOpen=e,this.validateEvent&&this.dispatch("ElFormItem","el.form.change",e))},emitInput:function(e){var t=this.formatToValue(e);Qi(this.value,t)||this.$emit("input",t)},isValidValue:function(e){return this.picker||this.mountPicker(),!this.picker.isValidValue||e&&this.picker.isValidValue(e)}}},Gi=Object(r.a)(Wi,function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.ranged?n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor el-range-editor el-input__inner",class:["el-date-editor--"+e.type,e.pickerSize?"el-range-editor--"+e.pickerSize:"",e.pickerDisabled?"is-disabled":"",e.pickerVisible?"is-active":""],on:{click:e.handleRangeClick,mouseenter:e.handleMouseEnter,mouseleave:function(t){e.showClose=!1},keydown:e.handleKeydown}},[n("i",{class:["el-input__icon","el-range__icon",e.triggerClass]}),n("input",e._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:e.startPlaceholder,disabled:e.pickerDisabled,readonly:!e.editable||e.readonly,name:e.name&&e.name[0]},domProps:{value:e.displayValue&&e.displayValue[0]},on:{input:e.handleStartInput,change:e.handleStartChange,focus:e.handleFocus}},"input",e.firstInputId,!1)),e._t("range-separator",[n("span",{staticClass:"el-range-separator"},[e._v(e._s(e.rangeSeparator))])]),n("input",e._b({staticClass:"el-range-input",attrs:{autocomplete:"off",placeholder:e.endPlaceholder,disabled:e.pickerDisabled,readonly:!e.editable||e.readonly,name:e.name&&e.name[1]},domProps:{value:e.displayValue&&e.displayValue[1]},on:{input:e.handleEndInput,change:e.handleEndChange,focus:e.handleFocus}},"input",e.secondInputId,!1)),e.haveTrigger?n("i",{staticClass:"el-input__icon el-range__close-icon",class:[e.showClose?""+e.clearIcon:""],on:{click:e.handleClickIcon}}):e._e()],2):n("el-input",e._b({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||"dates"===e.type,disabled:e.pickerDisabled,size:e.pickerSize,name:e.name,placeholder:e.placeholder,value:e.displayValue,validateEvent:!1},on:{focus:e.handleFocus,input:function(t){return e.userInput=t},change:e.handleChange},nativeOn:{keydown:function(t){return e.handleKeydown(t)},mouseenter:function(t){return e.handleMouseEnter(t)},mouseleave:function(t){e.showClose=!1}}},"el-input",e.firstInputId,!1),[n("i",{staticClass:"el-input__icon",class:e.triggerClass,attrs:{slot:"prefix"},on:{click:e.handleFocus},slot:"prefix"}),e.haveTrigger?n("i",{staticClass:"el-input__icon",class:[e.showClose?""+e.clearIcon:""],attrs:{slot:"suffix"},on:{click:e.handleClickIcon},slot:"suffix"}):e._e()])},[],!1,null,null,null);Gi.options.__file="picker.vue";var qi=Gi.exports,Zi={components:{ElScrollbar:oe},directives:{repeatClick:Tt},props:{date:{},defaultValue:{},showSeconds:{type:Boolean,default:!0},arrowControl:Boolean,amPmMode:{type:String,default:""}},computed:{hours:function(){return this.date.getHours()},minutes:function(){return this.date.getMinutes()},seconds:function(){return this.date.getSeconds()},hoursList:function(){return function(e){var t=[],n=[];if((e||[]).forEach(function(e){var t=e.map(function(e){return e.getHours()});n=n.concat(function(e,t){for(var n=[],i=e;i<=t;i++)n.push(i);return n}(t[0],t[1]))}),n.length)for(var i=0;i<24;i++)t[i]=-1===n.indexOf(i);else for(var r=0;r<24;r++)t[r]=!1;return t}(this.selectableRange)},minutesList:function(){return e=this.selectableRange,t=this.hours,n=new Array(60),e.length>0?e.forEach(function(e){var i=e[0],r=e[1],o=i.getHours(),s=i.getMinutes(),a=r.getHours(),l=r.getMinutes();o===t&&a!==t?vi(n,s,60,!0):o===t&&a===t?vi(n,s,l+1,!0):o!==t&&a===t?vi(n,0,l+1,!0):ot&&vi(n,0,60,!0)}):vi(n,0,60,!0),n;var e,t,n},arrowHourList:function(){var e=this.hours;return[e>0?e-1:void 0,e,e<23?e+1:void 0]},arrowMinuteList:function(){var e=this.minutes;return[e>0?e-1:void 0,e,e<59?e+1:void 0]},arrowSecondList:function(){var e=this.seconds;return[e>0?e-1:void 0,e,e<59?e+1:void 0]}},data:function(){return{selectableRange:[],currentScrollbar:null}},mounted:function(){var e=this;this.$nextTick(function(){!e.arrowControl&&e.bindScrollEvent()})},methods:{increase:function(){this.scrollDown(1)},decrease:function(){this.scrollDown(-1)},modifyDateField:function(e,t){switch(e){case"hours":this.$emit("change",Mi(this.date,t,this.minutes,this.seconds));break;case"minutes":this.$emit("change",Mi(this.date,this.hours,t,this.seconds));break;case"seconds":this.$emit("change",Mi(this.date,this.hours,this.minutes,t))}},handleClick:function(e,t){var n=t.value;t.disabled||(this.modifyDateField(e,n),this.emitSelectRange(e),this.adjustSpinner(e,n))},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),this.currentScrollbar=e},bindScrollEvent:function(){var e=this,t=function(t){e.$refs[t].wrap.onscroll=function(n){e.handleScroll(t,n)}};t("hours"),t("minutes"),t("seconds")},handleScroll:function(e){var t=Math.min(Math.floor((this.$refs[e].wrap.scrollTop-(.5*this.scrollBarHeight(e)-10)/this.typeItemHeight(e)+3)/this.typeItemHeight(e)),"hours"===e?23:59);this.modifyDateField(e,t)},adjustSpinners:function(){this.adjustSpinner("hours",this.hours),this.adjustSpinner("minutes",this.minutes),this.adjustSpinner("seconds",this.seconds)},adjustCurrentSpinner:function(e){this.adjustSpinner(e,this[e])},adjustSpinner:function(e,t){if(!this.arrowControl){var n=this.$refs[e].wrap;n&&(n.scrollTop=Math.max(0,t*this.typeItemHeight(e)))}},scrollDown:function(e){this.currentScrollbar||this.emitSelectRange("hours");var t=this.currentScrollbar,n=this.hoursList,i=this[t];if("hours"===this.currentScrollbar){var r=Math.abs(e);e=e>0?1:-1;for(var o=n.length;o--&&r;)n[i=(i+e+n.length)%n.length]||r--;if(n[i])return}else i=(i+e+60)%60;this.modifyDateField(t,i),this.adjustSpinner(t,i)},amPm:function(e){if(!("a"===this.amPmMode.toLowerCase()))return"";var t=e<12?" am":" pm";return"A"===this.amPmMode&&(t=t.toUpperCase()),t},typeItemHeight:function(e){return this.$refs[e].$el.querySelector("li").offsetHeight},scrollBarHeight:function(e){return this.$refs[e].$el.offsetHeight}}},Ki=Object(r.a)(Zi,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-time-spinner",class:{"has-seconds":e.showSeconds}},[e.arrowControl?e._e():[n("el-scrollbar",{ref:"hours",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")},mousemove:function(t){e.adjustCurrentSpinner("hours")}}},e._l(e.hoursList,function(t,i){return n("li",{key:i,staticClass:"el-time-spinner__item",class:{active:i===e.hours,disabled:t},on:{click:function(n){e.handleClick("hours",{value:i,disabled:t})}}},[e._v(e._s(("0"+(e.amPmMode?i%12||12:i)).slice(-2))+e._s(e.amPm(i)))])}),0),n("el-scrollbar",{ref:"minutes",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")},mousemove:function(t){e.adjustCurrentSpinner("minutes")}}},e._l(e.minutesList,function(t,i){return n("li",{key:i,staticClass:"el-time-spinner__item",class:{active:i===e.minutes,disabled:!t},on:{click:function(t){e.handleClick("minutes",{value:i,disabled:!1})}}},[e._v(e._s(("0"+i).slice(-2)))])}),0),n("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:e.showSeconds,expression:"showSeconds"}],ref:"seconds",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")},mousemove:function(t){e.adjustCurrentSpinner("seconds")}}},e._l(60,function(t,i){return n("li",{key:i,staticClass:"el-time-spinner__item",class:{active:i===e.seconds},on:{click:function(t){e.handleClick("seconds",{value:i,disabled:!1})}}},[e._v(e._s(("0"+i).slice(-2)))])}),0)],e.arrowControl?[n("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(t){e.emitSelectRange("hours")}}},[n("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),n("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),n("ul",{ref:"hours",staticClass:"el-time-spinner__list"},e._l(e.arrowHourList,function(t,i){return n("li",{key:i,staticClass:"el-time-spinner__item",class:{active:t===e.hours,disabled:e.hoursList[t]}},[e._v(e._s(void 0===t?"":("0"+(e.amPmMode?t%12||12:t)).slice(-2)+e.amPm(t)))])}),0)]),n("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(t){e.emitSelectRange("minutes")}}},[n("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),n("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),n("ul",{ref:"minutes",staticClass:"el-time-spinner__list"},e._l(e.arrowMinuteList,function(t,i){return n("li",{key:i,staticClass:"el-time-spinner__item",class:{active:t===e.minutes}},[e._v("\n "+e._s(void 0===t?"":("0"+t).slice(-2))+"\n ")])}),0)]),e.showSeconds?n("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(t){e.emitSelectRange("seconds")}}},[n("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),n("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),n("ul",{ref:"seconds",staticClass:"el-time-spinner__list"},e._l(e.arrowSecondList,function(t,i){return n("li",{key:i,staticClass:"el-time-spinner__item",class:{active:t===e.seconds}},[e._v("\n "+e._s(void 0===t?"":("0"+t).slice(-2))+"\n ")])}),0)]):e._e()]:e._e()],2)},[],!1,null,null,null);Ki.options.__file="time-spinner.vue";var Ji=Ki.exports,Xi={mixins:[c],components:{TimeSpinner:Ji},props:{visible:Boolean,timeArrowControl:Boolean},watch:{visible:function(e){var t=this;e?(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.spinner.emitSelectRange("hours")})):this.needInitAdjust=!0},value:function(e){var t=this,n=void 0;e instanceof Date?n=Ni(e,this.selectableRange,this.format):e||(n=this.defaultValue?new Date(this.defaultValue):new Date),this.date=n,this.visible&&this.needInitAdjust&&(this.$nextTick(function(e){return t.adjustSpinners()}),this.needInitAdjust=!1)},selectableRange:function(e){this.$refs.spinner.selectableRange=e},defaultValue:function(e){ui(this.value)||(this.date=e?new Date(e):new Date)}},data:function(){return{popperClass:"",format:"HH:mm:ss",value:"",defaultValue:null,date:new Date,oldValue:new Date,selectableRange:[],selectionRange:[0,2],disabled:!1,arrowControl:!1,needInitAdjust:!0}},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},useArrow:function(){return this.arrowControl||this.timeArrowControl||!1},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},methods:{handleCancel:function(){this.$emit("pick",this.oldValue,!1)},handleChange:function(e){this.visible&&(this.date=xi(e),this.isValidValue(this.date)&&this.$emit("pick",this.date,!0))},setSelectionRange:function(e,t){this.$emit("select-range",e,t),this.selectionRange=[e,t]},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments[1];if(!t){var n=xi(Ni(this.date,this.selectableRange,this.format));this.$emit("pick",n,e,t)}},handleKeydown:function(e){var t=e.keyCode,n={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var i=n[t];return this.changeSelectionRange(i),void e.preventDefault()}if(38===t||40===t){var r=n[t];return this.$refs.spinner.scrollDown(r),void e.preventDefault()}},isValidValue:function(e){return Di(e,this.selectableRange,this.format)},adjustSpinners:function(){return this.$refs.spinner.adjustSpinners()},changeSelectionRange:function(e){var t=[0,3].concat(this.showSeconds?[6]:[]),n=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),i=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length;this.$refs.spinner.emitSelectRange(n[i])}},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)}),this.$emit("mounted")}},er=Object(r.a)(Xi,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-time-panel el-popper",class:e.popperClass},[n("div",{staticClass:"el-time-panel__content",class:{"has-seconds":e.showSeconds}},[n("time-spinner",{ref:"spinner",attrs:{"arrow-control":e.useArrow,"show-seconds":e.showSeconds,"am-pm-mode":e.amPmMode,date:e.date},on:{change:e.handleChange,"select-range":e.setSelectionRange}})],1),n("div",{staticClass:"el-time-panel__footer"},[n("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:e.handleCancel}},[e._v(e._s(e.t("el.datepicker.cancel")))]),n("button",{staticClass:"el-time-panel__btn",class:{confirm:!e.disabled},attrs:{type:"button"},on:{click:function(t){e.handleConfirm()}}},[e._v(e._s(e.t("el.datepicker.confirm")))])])])])},[],!1,null,null,null);er.options.__file="time.vue";var tr=er.exports,nr={props:{disabledDate:{},value:{},defaultValue:{validator:function(e){return null===e||e instanceof Date&&ui(e)}},date:{}},computed:{startYear:function(){return 10*Math.floor(this.date.getFullYear()/10)}},methods:{getCellStyle:function(e){var t={},n=new Date;return t.disabled="function"==typeof this.disabledDate&&function(e){var t=function(e){return e%400==0||e%100!=0&&e%4==0?366:365}(e),n=new Date(e,0,1);return yi(t).map(function(e){return mi(n,e)})}(e).every(this.disabledDate),t.current=Object(Y.b)(Object(Y.c)(this.value),function(t){return t.getFullYear()===e})>=0,t.today=n.getFullYear()===e,t.default=this.defaultValue&&this.defaultValue.getFullYear()===e,t},handleYearTableClick:function(e){var t=e.target;if("A"===t.tagName){if(Object(C.c)(t.parentNode,"disabled"))return;var n=t.textContent||t.innerText;this.$emit("pick",Number(n))}}}},ir=Object(r.a)(nr,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",{staticClass:"el-year-table",on:{click:e.handleYearTableClick}},[n("tbody",[n("tr",[n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+0)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear))])]),n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+1)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+1))])]),n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+2)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+2))])]),n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+3)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+3))])])]),n("tr",[n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+4)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+4))])]),n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+5)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+5))])]),n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+6)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+6))])]),n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+7)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+7))])])]),n("tr",[n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+8)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+8))])]),n("td",{staticClass:"available",class:e.getCellStyle(e.startYear+9)},[n("a",{staticClass:"cell"},[e._v(e._s(e.startYear+9))])]),n("td"),n("td")])])])},[],!1,null,null,null);ir.options.__file="year-table.vue";var rr=ir.exports,or={props:{disabledDate:{},value:{},defaultValue:{validator:function(e){return null===e||e instanceof Date&&ui(e)}},date:{}},mixins:[c],methods:{getCellStyle:function(e){var t={},n=this.date.getFullYear(),i=new Date;return t.disabled="function"==typeof this.disabledDate&&function(e,t){var n=pi(e,t),i=new Date(e,t,1);return yi(n).map(function(e){return mi(i,e)})}(n,e).every(this.disabledDate),t.current=Object(Y.b)(Object(Y.c)(this.value),function(t){return t.getFullYear()===n&&t.getMonth()===e})>=0,t.today=i.getFullYear()===n&&i.getMonth()===e,t.default=this.defaultValue&&this.defaultValue.getFullYear()===n&&this.defaultValue.getMonth()===e,t},handleMonthTableClick:function(e){var t=e.target;if("A"===t.tagName&&!Object(C.c)(t.parentNode,"disabled")){var n=t.parentNode.cellIndex,i=4*t.parentNode.parentNode.rowIndex+n;this.$emit("pick",i)}}}},sr=Object(r.a)(or,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",{staticClass:"el-month-table",on:{click:e.handleMonthTableClick}},[n("tbody",[n("tr",[n("td",{class:e.getCellStyle(0)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jan")))])]),n("td",{class:e.getCellStyle(1)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.feb")))])]),n("td",{class:e.getCellStyle(2)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.mar")))])]),n("td",{class:e.getCellStyle(3)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.apr")))])])]),n("tr",[n("td",{class:e.getCellStyle(4)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.may")))])]),n("td",{class:e.getCellStyle(5)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jun")))])]),n("td",{class:e.getCellStyle(6)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jul")))])]),n("td",{class:e.getCellStyle(7)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.aug")))])])]),n("tr",[n("td",{class:e.getCellStyle(8)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.sep")))])]),n("td",{class:e.getCellStyle(9)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.oct")))])]),n("td",{class:e.getCellStyle(10)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.nov")))])]),n("td",{class:e.getCellStyle(11)},[n("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.dec")))])])])])])},[],!1,null,null,null);sr.options.__file="month-table.vue";var ar=sr.exports,lr=["sun","mon","tue","wed","thu","fri","sat"],ur=function(e){return"number"==typeof e||"string"==typeof e?Ci(new Date(e)).getTime():e instanceof Date?Ci(e).getTime():NaN},cr={mixins:[c],props:{firstDayOfWeek:{default:7,type:Number,validator:function(e){return e>=1&&e<=7}},value:{},defaultValue:{validator:function(e){return null===e||ui(e)||Array.isArray(e)&&e.every(ui)}},date:{},selectionMode:{default:"day"},showWeekNumber:{type:Boolean,default:!1},disabledDate:{},minDate:{},maxDate:{},rangeState:{default:function(){return{endDate:null,selecting:!1}}}},computed:{offsetDay:function(){var e=this.firstDayOfWeek;return e>3?7-e:-e},WEEKS:function(){var e=this.firstDayOfWeek;return lr.concat(lr).slice(e,e+7)},year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},startDate:function(){return e=this.year,t=this.month,n=new Date(e,t,1),i=n.getDay(),fi(n,0===i?7:i);var e,t,n,i},rows:function(){var e=this,t=new Date(this.year,this.month,1),n=function(e){var t=new Date(e.getTime());return t.setDate(1),t.getDay()}(t),i=pi(t.getFullYear(),t.getMonth()),r=pi(t.getFullYear(),0===t.getMonth()?11:t.getMonth()-1);n=0===n?7:n;for(var o=this.offsetDay,s=this.tableRows,a=1,l=void 0,u=this.startDate,c=this.disabledDate,h="dates"===this.selectionMode?Object(Y.c)(this.value):[],d=ur(new Date),p=0;p<6;p++){var f=s[p];this.showWeekNumber&&(f[0]||(f[0]={type:"week",text:gi(mi(u,7*p+1))}));for(var m=function(t){var s=f[e.showWeekNumber?t+1:t];s||(s={row:p,column:t,type:"normal",inRange:!1,start:!1,end:!1}),s.type="normal";var m=mi(u,7*p+t-o).getTime();s.inRange=m>=ur(e.minDate)&&m<=ur(e.maxDate),s.start=e.minDate&&m===ur(e.minDate),s.end=e.maxDate&&m===ur(e.maxDate),m===d&&(s.type="today"),p>=0&&p<=1?t+7*p>=n+o?(s.text=a++,2===a&&(l=7*p+t)):(s.text=r-(n+o-t%7)+1+7*p,s.type="prev-month"):a<=i?(s.text=a++,2===a&&(l=7*p+t)):(s.text=a++-i,s.type="next-month");var g=new Date(m);s.disabled="function"==typeof c&&c(g),s.selected=Object(Y.a)(h,function(e){return e.getTime()===g.getTime()}),e.$set(f,e.showWeekNumber?t+1:t,s)},g=0;g<7;g++)m(g);if("week"===this.selectionMode){var v=this.showWeekNumber?1:0,y=this.showWeekNumber?7:6,b=this.isWeekActive(f[v+1]);f[v].inRange=b,f[v].start=b,f[y].inRange=b,f[y].end=b}}return s.firstDayPosition=l,s}},watch:{"rangeState.endDate":function(e){this.markRange(this.minDate,e)},minDate:function(e,t){ur(e)!==ur(t)&&this.markRange(this.minDate,this.maxDate)},maxDate:function(e,t){ur(e)!==ur(t)&&this.markRange(this.minDate,this.maxDate)}},data:function(){return{tableRows:[[],[],[],[],[],[]],lastRow:null,lastColumn:null}},methods:{cellMatchesDate:function(e,t){var n=new Date(t);return this.year===n.getFullYear()&&this.month===n.getMonth()&&Number(e.text)===n.getDate()},getCellClasses:function(e){var t=this,n=this.selectionMode,i=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[],r=[];return"normal"!==e.type&&"today"!==e.type||e.disabled?r.push(e.type):(r.push("available"),"today"===e.type&&r.push("today")),"normal"===e.type&&i.some(function(n){return t.cellMatchesDate(e,n)})&&r.push("default"),"day"!==n||"normal"!==e.type&&"today"!==e.type||!this.cellMatchesDate(e,this.value)||r.push("current"),!e.inRange||"normal"!==e.type&&"today"!==e.type&&"week"!==this.selectionMode||(r.push("in-range"),e.start&&r.push("start-date"),e.end&&r.push("end-date")),e.disabled&&r.push("disabled"),e.selected&&r.push("selected"),r.join(" ")},getDateOfCell:function(e,t){var n=7*e+(t-(this.showWeekNumber?1:0))-this.offsetDay;return mi(this.startDate,n)},isWeekActive:function(e){if("week"!==this.selectionMode)return!1;var t=new Date(this.year,this.month,1),n=t.getFullYear(),i=t.getMonth();if("prev-month"===e.type&&(t.setMonth(0===i?11:i-1),t.setFullYear(0===i?n-1:n)),"next-month"===e.type&&(t.setMonth(11===i?0:i+1),t.setFullYear(11===i?n+1:n)),t.setDate(parseInt(e.text,10)),ui(this.value)){var r=(this.value.getDay()-this.firstDayOfWeek+7)%7-1;return fi(this.value,r).getTime()===t.getTime()}return!1},markRange:function(e,t){e=ur(e),t=ur(t)||e;var n=[Math.min(e,t),Math.max(e,t)];e=n[0],t=n[1];for(var i=this.startDate,r=this.rows,o=0,s=r.length;o=e&&d<=t,c.start=e&&d===e,c.end=t&&d===t}},handleMouseMove:function(e){if(this.rangeState.selecting){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var n=t.parentNode.rowIndex-1,i=t.cellIndex;this.rows[n][i].disabled||n===this.lastRow&&i===this.lastColumn||(this.lastRow=n,this.lastColumn=i,this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:{selecting:!0,endDate:this.getDateOfCell(n,i)}}))}}},handleClick:function(e){var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var n=t.parentNode.rowIndex-1,i="week"===this.selectionMode?1:t.cellIndex,r=this.rows[n][i];if(!r.disabled&&"week"!==r.type){var o,s,a,l=this.getDateOfCell(n,i);if("range"===this.selectionMode)this.rangeState.selecting?(l>=this.minDate?this.$emit("pick",{minDate:this.minDate,maxDate:l}):this.$emit("pick",{minDate:l,maxDate:this.minDate}),this.rangeState.selecting=!1):(this.$emit("pick",{minDate:l,maxDate:null}),this.rangeState.selecting=!0);else if("day"===this.selectionMode)this.$emit("pick",l);else if("week"===this.selectionMode){var u=gi(l),c=l.getFullYear()+"w"+u;this.$emit("pick",{year:l.getFullYear(),week:u,value:c,date:l})}else if("dates"===this.selectionMode){var h=this.value||[],d=r.selected?(o=h,(a="function"==typeof(s=function(e){return e.getTime()===l.getTime()})?Object(Y.b)(o,s):o.indexOf(s))>=0?[].concat(o.slice(0,a),o.slice(a+1)):o):[].concat(h,[l]);this.$emit("pick",d)}}}}}},hr=Object(r.a)(cr,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",{staticClass:"el-date-table",class:{"is-week-mode":"week"===e.selectionMode},attrs:{cellspacing:"0",cellpadding:"0"},on:{click:e.handleClick,mousemove:e.handleMouseMove}},[n("tbody",[n("tr",[e.showWeekNumber?n("th",[e._v(e._s(e.t("el.datepicker.week")))]):e._e(),e._l(e.WEEKS,function(t,i){return n("th",{key:i},[e._v(e._s(e.t("el.datepicker.weeks."+t)))])})],2),e._l(e.rows,function(t,i){return n("tr",{key:i,staticClass:"el-date-table__row",class:{current:e.isWeekActive(t[1])}},e._l(t,function(t,i){return n("td",{key:i,class:e.getCellClasses(t)},[n("div",[n("span",[e._v("\n "+e._s(t.text)+"\n ")])])])}),0)})],2)])},[],!1,null,null,null);hr.options.__file="date-table.vue";var dr=hr.exports,pr={mixins:[c],directives:{Clickoutside:pe},watch:{showTime:function(e){var t=this;e&&this.$nextTick(function(e){var n=t.$refs.input.$el;n&&(t.pickerWidth=n.getBoundingClientRect().width+10)})},value:function(e){"dates"===this.selectionMode&&this.value||(ui(e)?this.date=new Date(e):this.date=this.getDefaultValue())},defaultValue:function(e){ui(this.value)||(this.date=e?new Date(e):new Date)},timePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.timepicker.adjustSpinners()})},selectionMode:function(e){"month"===e?"year"===this.currentView&&"month"===this.currentView||(this.currentView="month"):"dates"===e&&(this.currentView="date")}},methods:{proxyTimePickerDataProperties:function(){var e,t=this,n=function(e){t.$refs.timepicker.value=e},i=function(e){t.$refs.timepicker.date=e},r=function(e){t.$refs.timepicker.selectableRange=e};this.$watch("value",n),this.$watch("date",i),this.$watch("selectableRange",r),e=this.timeFormat,t.$refs.timepicker.format=e,n(this.value),i(this.date),r(this.selectableRange)},handleClear:function(){this.date=this.getDefaultValue(),this.$emit("pick",null)},emit:function(e){for(var t=this,n=arguments.length,i=Array(n>1?n-1:0),r=1;r0)||Di(e,this.selectableRange,this.format||"HH:mm:ss")}},components:{TimePicker:tr,YearTable:rr,MonthTable:ar,DateTable:dr,ElInput:M,ElButton:ze},data:function(){return{popperClass:"",date:new Date,value:"",defaultValue:null,defaultTime:null,showTime:!1,selectionMode:"day",shortcuts:"",visible:!1,currentView:"date",disabledDate:"",selectableRange:[],firstDayOfWeek:7,showWeekNumber:!1,timePickerVisible:!1,format:"",arrowControl:!1,userInputDate:null,userInputTime:null}},computed:{year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},week:function(){return gi(this.date)},monthDate:function(){return this.date.getDate()},footerVisible:function(){return this.showTime||"dates"===this.selectionMode},visibleTime:function(){return null!==this.userInputTime?this.userInputTime:hi(this.value||this.defaultValue,this.timeFormat)},visibleDate:function(){return null!==this.userInputDate?this.userInputDate:hi(this.value||this.defaultValue,this.dateFormat)},yearLabel:function(){var e=this.t("el.datepicker.year");if("year"===this.currentView){var t=10*Math.floor(this.year/10);return e?t+" "+e+" - "+(t+9)+" "+e:t+" - "+(t+9)}return this.year+" "+e},timeFormat:function(){return this.format?Li(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?Si(this.format):"yyyy-MM-dd"}}},fr=Object(r.a)(pr,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-enter":e.handleEnter,"after-leave":e.handleLeave}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-picker el-popper",class:[{"has-sidebar":e.$slots.sidebar||e.shortcuts,"has-time":e.showTime},e.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[e._t("sidebar"),e.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},e._l(e.shortcuts,function(t,i){return n("button",{key:i,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(n){e.handleShortcutClick(t)}}},[e._v(e._s(t.text))])}),0):e._e(),n("div",{staticClass:"el-picker-panel__body"},[e.showTime?n("div",{staticClass:"el-date-picker__time-header"},[n("span",{staticClass:"el-date-picker__editor-wrap"},[n("el-input",{attrs:{placeholder:e.t("el.datepicker.selectDate"),value:e.visibleDate,size:"small"},on:{input:function(t){return e.userInputDate=t},change:e.handleVisibleDateChange}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleTimePickClose,expression:"handleTimePickClose"}],staticClass:"el-date-picker__editor-wrap"},[n("el-input",{ref:"input",attrs:{placeholder:e.t("el.datepicker.selectTime"),value:e.visibleTime,size:"small"},on:{focus:function(t){e.timePickerVisible=!0},input:function(t){return e.userInputTime=t},change:e.handleVisibleTimeChange}}),n("time-picker",{ref:"timepicker",attrs:{"time-arrow-control":e.arrowControl,visible:e.timePickerVisible},on:{pick:e.handleTimePick,mounted:e.proxyTimePickerDataProperties}})],1)]):e._e(),n("div",{directives:[{name:"show",rawName:"v-show",value:"time"!==e.currentView,expression:"currentView !== 'time'"}],staticClass:"el-date-picker__header",class:{"el-date-picker__header--bordered":"year"===e.currentView||"month"===e.currentView}},[n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",attrs:{type:"button","aria-label":e.t("el.datepicker.prevYear")},on:{click:e.prevYear}}),n("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","aria-label":e.t("el.datepicker.prevMonth")},on:{click:e.prevMonth}}),n("span",{staticClass:"el-date-picker__header-label",attrs:{role:"button"},on:{click:e.showYearPicker}},[e._v(e._s(e.yearLabel))]),n("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},attrs:{role:"button"},on:{click:e.showMonthPicker}},[e._v(e._s(e.t("el.datepicker.month"+(e.month+1))))]),n("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",attrs:{type:"button","aria-label":e.t("el.datepicker.nextYear")},on:{click:e.nextYear}}),n("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","aria-label":e.t("el.datepicker.nextMonth")},on:{click:e.nextMonth}})]),n("div",{staticClass:"el-picker-panel__content"},[n("date-table",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],attrs:{"selection-mode":e.selectionMode,"first-day-of-week":e.firstDayOfWeek,value:e.value,"default-value":e.defaultValue?new Date(e.defaultValue):null,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleDatePick}}),n("year-table",{directives:[{name:"show",rawName:"v-show",value:"year"===e.currentView,expression:"currentView === 'year'"}],attrs:{value:e.value,"default-value":e.defaultValue?new Date(e.defaultValue):null,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleYearPick}}),n("month-table",{directives:[{name:"show",rawName:"v-show",value:"month"===e.currentView,expression:"currentView === 'month'"}],attrs:{value:e.value,"default-value":e.defaultValue?new Date(e.defaultValue):null,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleMonthPick}})],1)])],2),n("div",{directives:[{name:"show",rawName:"v-show",value:e.footerVisible&&"date"===e.currentView,expression:"footerVisible && currentView === 'date'"}],staticClass:"el-picker-panel__footer"},[n("el-button",{directives:[{name:"show",rawName:"v-show",value:"dates"!==e.selectionMode,expression:"selectionMode !== 'dates'"}],staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:e.changeToNow}},[e._v("\n "+e._s(e.t("el.datepicker.now"))+"\n ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini"},on:{click:e.confirm}},[e._v("\n "+e._s(e.t("el.datepicker.confirm"))+"\n ")])],1)])])},[],!1,null,null,null);fr.options.__file="date.vue";var mr=fr.exports,gr=function(e,t){return new Date(new Date(e).getTime()+t)},vr=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),gr(e,864e5)]:[new Date,gr(Date.now(),864e5)]},yr={mixins:[c],directives:{Clickoutside:pe},computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting&&this.isValidValue([this.minDate,this.maxDate]))},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.leftDate.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.leftDate.getFullYear()},leftMonth:function(){return this.leftDate.getMonth()},leftMonthDate:function(){return this.leftDate.getDate()},rightYear:function(){return this.rightDate.getFullYear()},rightMonth:function(){return this.rightDate.getMonth()},rightMonthDate:function(){return this.rightDate.getDate()},minVisibleDate:function(){return null!==this.dateUserInput.min?this.dateUserInput.min:this.minDate?hi(this.minDate,this.dateFormat):""},maxVisibleDate:function(){return null!==this.dateUserInput.max?this.dateUserInput.max:this.maxDate||this.minDate?hi(this.maxDate||this.minDate,this.dateFormat):""},minVisibleTime:function(){return null!==this.timeUserInput.min?this.timeUserInput.min:this.minDate?hi(this.minDate,this.timeFormat):""},maxVisibleTime:function(){return null!==this.timeUserInput.max?this.timeUserInput.max:this.maxDate||this.minDate?hi(this.maxDate||this.minDate,this.timeFormat):""},timeFormat:function(){return this.format?Li(this.format):"HH:mm:ss"},dateFormat:function(){return this.format?Si(this.format):"yyyy-MM-dd"},enableMonthArrow:function(){var e=(this.leftMonth+1)%12,t=this.leftMonth+1>=12?1:0;return this.unlinkPanels&&new Date(this.leftYear+t,e)=12}},data:function(){return{popperClass:"",value:[],defaultValue:null,defaultTime:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:ki(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},showTime:!1,shortcuts:"",visible:"",disabledDate:"",firstDayOfWeek:7,minTimePickerVisible:!1,maxTimePickerVisible:!1,format:"",arrowControl:!1,unlinkPanels:!1,dateUserInput:{min:null,max:null},timeUserInput:{min:null,max:null}}},watch:{minDate:function(e){var t=this;this.dateUserInput.min=null,this.timeUserInput.min=null,this.$nextTick(function(){if(t.$refs.maxTimePicker&&t.maxDate&&t.maxDatethis.maxDate&&(this.maxDate=this.minDate)):(this.maxDate=bi(this.maxDate,n.getFullYear(),n.getMonth(),n.getDate()),this.maxDatethis.maxDate&&(this.maxDate=this.minDate),this.$refs.minTimePicker.value=this.minDate,this.minTimePickerVisible=!1):(this.maxDate=Mi(this.maxDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.maxDate1&&void 0!==arguments[1])||arguments[1],i=this.defaultTime||[],r=wi(e.minDate,i[0]),o=wi(e.maxDate,i[1]);this.maxDate===o&&this.minDate===r||(this.onPick&&this.onPick(e),this.maxDate=o,this.minDate=r,setTimeout(function(){t.maxDate=o,t.minDate=r},10),n&&!this.showTime&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleMinTimePick:function(e,t,n){this.minDate=this.minDate||new Date,e&&(this.minDate=Mi(this.minDate,e.getHours(),e.getMinutes(),e.getSeconds())),n||(this.minTimePickerVisible=t),(!this.maxDate||this.maxDate&&this.maxDate.getTime()this.maxDate.getTime()&&(this.minDate=new Date(this.maxDate))},handleMaxTimeClose:function(){this.maxTimePickerVisible=!1},leftPrevYear:function(){this.leftDate=ji(this.leftDate),this.unlinkPanels||(this.rightDate=ki(this.leftDate))},leftPrevMonth:function(){this.leftDate=Ii(this.leftDate),this.unlinkPanels||(this.rightDate=ki(this.leftDate))},rightNextYear:function(){this.unlinkPanels?this.rightDate=Ti(this.rightDate):(this.leftDate=Ti(this.leftDate),this.rightDate=ki(this.leftDate))},rightNextMonth:function(){this.unlinkPanels?this.rightDate=ki(this.rightDate):(this.leftDate=ki(this.leftDate),this.rightDate=ki(this.leftDate))},leftNextYear:function(){this.leftDate=Ti(this.leftDate)},leftNextMonth:function(){this.leftDate=ki(this.leftDate)},rightPrevYear:function(){this.rightDate=ji(this.rightDate)},rightPrevMonth:function(){this.rightDate=Ii(this.rightDate)},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.isValidValue([this.minDate,this.maxDate])&&this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&ui(e[0])&&ui(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))},resetView:function(){this.minDate=this.value&&ui(this.value[0])?new Date(this.value[0]):null,this.maxDate=this.value&&ui(this.value[0])?new Date(this.value[1]):null}},components:{TimePicker:tr,DateTable:dr,ElInput:M,ElButton:ze}},br=Object(r.a)(yr,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":e.$slots.sidebar||e.shortcuts,"has-time":e.showTime},e.popperClass]},[n("div",{staticClass:"el-picker-panel__body-wrapper"},[e._t("sidebar"),e.shortcuts?n("div",{staticClass:"el-picker-panel__sidebar"},e._l(e.shortcuts,function(t,i){return n("button",{key:i,staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(n){e.handleShortcutClick(t)}}},[e._v(e._s(t.text))])}),0):e._e(),n("div",{staticClass:"el-picker-panel__body"},[e.showTime?n("div",{staticClass:"el-date-range-picker__time-header"},[n("span",{staticClass:"el-date-range-picker__editors-wrap"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{ref:"minInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:e.rangeState.selecting,placeholder:e.t("el.datepicker.startDate"),value:e.minVisibleDate},on:{input:function(t){return e.handleDateInput(t,"min")},change:function(t){return e.handleDateChange(t,"min")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleMinTimeClose,expression:"handleMinTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:e.rangeState.selecting,placeholder:e.t("el.datepicker.startTime"),value:e.minVisibleTime},on:{focus:function(t){e.minTimePickerVisible=!0},input:function(t){return e.handleTimeInput(t,"min")},change:function(t){return e.handleTimeChange(t,"min")}}}),n("time-picker",{ref:"minTimePicker",attrs:{"time-arrow-control":e.arrowControl,visible:e.minTimePickerVisible},on:{pick:e.handleMinTimePick,mounted:function(t){e.$refs.minTimePicker.format=e.timeFormat}}})],1)]),n("span",{staticClass:"el-icon-arrow-right"}),n("span",{staticClass:"el-date-range-picker__editors-wrap is-right"},[n("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:e.rangeState.selecting,placeholder:e.t("el.datepicker.endDate"),value:e.maxVisibleDate,readonly:!e.minDate},on:{input:function(t){return e.handleDateInput(t,"max")},change:function(t){return e.handleDateChange(t,"max")}}})],1),n("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleMaxTimeClose,expression:"handleMaxTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[n("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",disabled:e.rangeState.selecting,placeholder:e.t("el.datepicker.endTime"),value:e.maxVisibleTime,readonly:!e.minDate},on:{focus:function(t){e.minDate&&(e.maxTimePickerVisible=!0)},input:function(t){return e.handleTimeInput(t,"max")},change:function(t){return e.handleTimeChange(t,"max")}}}),n("time-picker",{ref:"maxTimePicker",attrs:{"time-arrow-control":e.arrowControl,visible:e.maxTimePickerVisible},on:{pick:e.handleMaxTimePick,mounted:function(t){e.$refs.maxTimePicker.format=e.timeFormat}}})],1)])]):e._e(),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[n("div",{staticClass:"el-date-range-picker__header"},[n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:e.leftPrevYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:e.leftPrevMonth}}),e.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{"is-disabled":!e.enableYearArrow},attrs:{type:"button",disabled:!e.enableYearArrow},on:{click:e.leftNextYear}}):e._e(),e.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",class:{"is-disabled":!e.enableMonthArrow},attrs:{type:"button",disabled:!e.enableMonthArrow},on:{click:e.leftNextMonth}}):e._e(),n("div",[e._v(e._s(e.leftLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:e.leftDate,"default-value":e.defaultValue,"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),n("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[n("div",{staticClass:"el-date-range-picker__header"},[e.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{"is-disabled":!e.enableYearArrow},attrs:{type:"button",disabled:!e.enableYearArrow},on:{click:e.rightPrevYear}}):e._e(),e.unlinkPanels?n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",class:{"is-disabled":!e.enableMonthArrow},attrs:{type:"button",disabled:!e.enableMonthArrow},on:{click:e.rightPrevMonth}}):e._e(),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:e.rightNextYear}}),n("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:e.rightNextMonth}}),n("div",[e._v(e._s(e.rightLabel))])]),n("date-table",{attrs:{"selection-mode":"range",date:e.rightDate,"default-value":e.defaultValue,"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?n("div",{staticClass:"el-picker-panel__footer"},[n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:e.handleClear}},[e._v("\n "+e._s(e.t("el.datepicker.clear"))+"\n ")]),n("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini",disabled:e.btnDisabled},on:{click:function(t){e.handleConfirm(!1)}}},[e._v("\n "+e._s(e.t("el.datepicker.confirm"))+"\n ")])],1):e._e()])])},[],!1,null,null,null);br.options.__file="date-range.vue";var Mr=br.exports,wr=function(e){return"daterange"===e||"datetimerange"===e?Mr:mr},Cr={mixins:[qi],name:"ElDatePicker",props:{type:{type:String,default:"date"},timeArrowControl:Boolean},watch:{type:function(e){this.picker?(this.unmountPicker(),this.panel=wr(e),this.mountPicker()):this.panel=wr(e)}},created:function(){this.panel=wr(this.type)},install:function(e){e.component(Cr.name,Cr)}},xr=Cr,Nr=function(e){var t=(e||"").split(":");return t.length>=2?{hours:parseInt(t[0],10),minutes:parseInt(t[1],10)}:null},Dr=function(e,t){var n=Nr(e),i=Nr(t),r=n.minutes+60*n.hours,o=i.minutes+60*i.hours;return r===o?0:r>o?1:-1},_r=function(e,t){var n=Nr(e),i=Nr(t),r={hours:n.hours,minutes:n.minutes};return r.minutes+=i.minutes,r.hours+=i.hours,r.hours+=Math.floor(r.minutes/60),r.minutes=r.minutes%60,function(e){return(e.hours<10?"0"+e.hours:e.hours)+":"+(e.minutes<10?"0"+e.minutes:e.minutes)}(r)},Ir={components:{ElScrollbar:oe},watch:{value:function(e){var t=this;e&&this.$nextTick(function(){return t.scrollToOption()})}},methods:{handleClick:function(e){e.disabled||this.$emit("pick",e.value)},handleClear:function(){this.$emit("pick",null)},scrollToOption:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".selected",t=this.$refs.popper.querySelector(".el-picker-panel__content");fe(t,t.querySelector(e))},handleMenuEnter:function(){var e=this,t=-1!==this.items.map(function(e){return e.value}).indexOf(this.value),n=-1!==this.items.map(function(e){return e.value}).indexOf(this.defaultValue),i=(t?".selected":n&&".default")||".time-select-item:not(.disabled)";this.$nextTick(function(){return e.scrollToOption(i)})},scrollDown:function(e){for(var t=this.items,n=t.length,i=t.length,r=t.map(function(e){return e.value}).indexOf(this.value);i--;)if(!t[r=(r+e+n)%n].disabled)return void this.$emit("pick",t[r].value,!0)},isValidValue:function(e){return-1!==this.items.filter(function(e){return!e.disabled}).map(function(e){return e.value}).indexOf(e)},handleKeydown:function(e){var t=e.keyCode;if(38===t||40===t){var n={40:1,38:-1}[t.toString()];return this.scrollDown(n),void e.stopPropagation()}}},data:function(){return{popperClass:"",start:"09:00",end:"18:00",step:"00:30",value:"",defaultValue:"",visible:!1,minTime:"",maxTime:"",width:0}},computed:{items:function(){var e=this.start,t=this.end,n=this.step,i=[];if(e&&t&&n)for(var r=e;Dr(r,t)<=0;)i.push({value:r,disabled:Dr(r,this.minTime||"-1:-1")<=0||Dr(r,this.maxTime||"100:100")>=0}),r=_r(r,n);return i}}},kr=Object(r.a)(Ir,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":e.handleMenuEnter,"after-leave":function(t){e.$emit("dodestroy")}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],ref:"popper",staticClass:"el-picker-panel time-select el-popper",class:e.popperClass,style:{width:e.width+"px"}},[n("el-scrollbar",{attrs:{noresize:"","wrap-class":"el-picker-panel__content"}},e._l(e.items,function(t){return n("div",{key:t.value,staticClass:"time-select-item",class:{selected:e.value===t.value,disabled:t.disabled,default:t.value===e.defaultValue},attrs:{disabled:t.disabled},on:{click:function(n){e.handleClick(t)}}},[e._v(e._s(t.value))])}),0)],1)])},[],!1,null,null,null);kr.options.__file="time-select.vue";var jr=kr.exports,Tr={mixins:[qi],name:"ElTimeSelect",componentName:"ElTimeSelect",props:{type:{type:String,default:"time-select"}},beforeCreate:function(){this.panel=jr},install:function(e){e.component(Tr.name,Tr)}},Sr=Tr,Lr=di("00:00:00","HH:mm:ss"),Or=di("23:59:59","HH:mm:ss"),Ar=function(e){return bi(Or,e.getFullYear(),e.getMonth(),e.getDate())},Er=function(e,t){return new Date(Math.min(e.getTime()+t,Ar(e).getTime()))},zr={mixins:[c],components:{TimeSpinner:Ji},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},offset:function(){return this.showSeconds?11:8},spinner:function(){return this.selectionRange[0]this.maxDate.getTime()},amPmMode:function(){return-1!==(this.format||"").indexOf("A")?"A":-1!==(this.format||"").indexOf("a")?"a":""}},data:function(){return{popperClass:"",minDate:new Date,maxDate:new Date,value:[],oldValue:[new Date,new Date],defaultValue:null,format:"HH:mm:ss",visible:!1,selectionRange:[0,2],arrowControl:!1}},watch:{value:function(e){Array.isArray(e)?(this.minDate=new Date(e[0]),this.maxDate=new Date(e[1])):Array.isArray(this.defaultValue)?(this.minDate=new Date(this.defaultValue[0]),this.maxDate=new Date(this.defaultValue[1])):this.defaultValue?(this.minDate=new Date(this.defaultValue),this.maxDate=Er(new Date(this.defaultValue),36e5)):(this.minDate=new Date,this.maxDate=Er(new Date,36e5))},visible:function(e){var t=this;e&&(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.minSpinner.emitSelectRange("hours")}))}},methods:{handleClear:function(){this.$emit("pick",null)},handleCancel:function(){this.$emit("pick",this.oldValue)},handleMinChange:function(e){this.minDate=xi(e),this.handleChange()},handleMaxChange:function(e){this.maxDate=xi(e),this.handleChange()},handleChange:function(){var e;this.isValidValue([this.minDate,this.maxDate])&&(this.$refs.minSpinner.selectableRange=[[(e=this.minDate,bi(Lr,e.getFullYear(),e.getMonth(),e.getDate())),this.maxDate]],this.$refs.maxSpinner.selectableRange=[[this.minDate,Ar(this.maxDate)]],this.$emit("pick",[this.minDate,this.maxDate],!0))},setMinSelectionRange:function(e,t){this.$emit("select-range",e,t,"min"),this.selectionRange=[e,t]},setMaxSelectionRange:function(e,t){this.$emit("select-range",e,t,"max"),this.selectionRange=[e+this.offset,t+this.offset]},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=this.$refs.minSpinner.selectableRange,n=this.$refs.maxSpinner.selectableRange;this.minDate=Ni(this.minDate,t,this.format),this.maxDate=Ni(this.maxDate,n,this.format),this.$emit("pick",[this.minDate,this.maxDate],e)},adjustSpinners:function(){this.$refs.minSpinner.adjustSpinners(),this.$refs.maxSpinner.adjustSpinners()},changeSelectionRange:function(e){var t=this.showSeconds?[0,3,6,11,14,17]:[0,3,8,11],n=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),i=(t.indexOf(this.selectionRange[0])+e+t.length)%t.length,r=t.length/2;i-1}},openDelay:{type:Number,default:0},title:String,disabled:Boolean,content:String,reference:{},popperClass:String,width:{},visibleArrow:{default:!0},arrowOffset:{type:Number,default:0},transition:{type:String,default:"fade-in-linear"}},computed:{tooltipId:function(){return"el-popover-"+Object(Y.e)()}},watch:{showPopper:function(e){this.disabled||(e?this.$emit("show"):this.$emit("hide"))}},mounted:function(){var e=this,t=this.referenceElm=this.reference||this.$refs.reference,n=this.popper||this.$refs.popper;!t&&this.$slots.reference&&this.$slots.reference[0]&&(t=this.referenceElm=this.$slots.reference[0].elm),t&&(Object(C.a)(t,"el-popover__reference"),t.setAttribute("aria-describedby",this.tooltipId),t.setAttribute("tabindex",0),n.setAttribute("tabindex",0),"click"!==this.trigger&&(Object(C.e)(t,"focusin",function(){e.handleFocus();var n=t.__vue__;n&&"function"==typeof n.focus&&n.focus()}),Object(C.e)(n,"focusin",this.handleFocus),Object(C.e)(t,"focusout",this.handleBlur),Object(C.e)(n,"focusout",this.handleBlur)),Object(C.e)(t,"keydown",this.handleKeydown),Object(C.e)(t,"click",this.handleClick)),"click"===this.trigger?(Object(C.e)(t,"click",this.doToggle),Object(C.e)(document,"click",this.handleDocumentClick)):"hover"===this.trigger?(Object(C.e)(t,"mouseenter",this.handleMouseEnter),Object(C.e)(n,"mouseenter",this.handleMouseEnter),Object(C.e)(t,"mouseleave",this.handleMouseLeave),Object(C.e)(n,"mouseleave",this.handleMouseLeave)):"focus"===this.trigger&&(t.querySelector("input, textarea")?(Object(C.e)(t,"focusin",this.doShow),Object(C.e)(t,"focusout",this.doClose)):(Object(C.e)(t,"mousedown",this.doShow),Object(C.e)(t,"mouseup",this.doClose)))},beforeDestroy:function(){this.cleanup()},deactivated:function(){this.cleanup()},methods:{doToggle:function(){this.showPopper=!this.showPopper},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},handleFocus:function(){Object(C.a)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!0)},handleClick:function(){Object(C.g)(this.referenceElm,"focusing")},handleBlur:function(){Object(C.g)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!1)},handleMouseEnter:function(){var e=this;clearTimeout(this._timer),this.openDelay?this._timer=setTimeout(function(){e.showPopper=!0},this.openDelay):this.showPopper=!0},handleKeydown:function(e){27===e.keyCode&&"manual"!==this.trigger&&this.doClose()},handleMouseLeave:function(){var e=this;clearTimeout(this._timer),this._timer=setTimeout(function(){e.showPopper=!1},200)},handleDocumentClick:function(e){var t=this.reference||this.$refs.reference,n=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)&&n&&!n.contains(e.target)&&(this.showPopper=!1)},handleAfterEnter:function(){this.$emit("after-enter")},handleAfterLeave:function(){this.$emit("after-leave"),this.doDestroy()},cleanup:function(){this.openDelay&&clearTimeout(this._timer)}},destroyed:function(){var e=this.reference;Object(C.d)(e,"click",this.doToggle),Object(C.d)(e,"mouseup",this.doClose),Object(C.d)(e,"mousedown",this.doShow),Object(C.d)(e,"focusin",this.doShow),Object(C.d)(e,"focusout",this.doClose),Object(C.d)(e,"mousedown",this.doShow),Object(C.d)(e,"mouseup",this.doClose),Object(C.d)(e,"mouseleave",this.handleMouseLeave),Object(C.d)(e,"mouseenter",this.handleMouseEnter),Object(C.d)(document,"click",this.handleDocumentClick)}},Rr=Object(r.a)(Yr,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("span",[n("transition",{attrs:{name:e.transition},on:{"after-enter":e.handleAfterEnter,"after-leave":e.handleAfterLeave}},[n("div",{directives:[{name:"show",rawName:"v-show",value:!e.disabled&&e.showPopper,expression:"!disabled && showPopper"}],ref:"popper",staticClass:"el-popover el-popper",class:[e.popperClass,e.content&&"el-popover--plain"],style:{width:e.width+"px"},attrs:{role:"tooltip",id:e.tooltipId,"aria-hidden":e.disabled||!e.showPopper?"true":"false"}},[e.title?n("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)},[],!1,null,null,null);Rr.options.__file="main.vue";var Br=Rr.exports,Qr=function(e,t,n){var i=t.expression?t.value:t.arg,r=n.context.$refs[i];r&&(Array.isArray(r)?r[0].$refs.reference=e:r.$refs.reference=e)},Vr={bind:function(e,t,n){Qr(e,t,n)},inserted:function(e,t,n){Qr(e,t,n)}};w.a.directive("popover",Vr),Br.install=function(e){e.directive("popover",Vr),e.component(Br.name,Br)},Br.directive=Vr;var Hr,Wr=Br,Gr="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},qr=qr||{};qr.Dialog=function(e,t,n){var i=this;if(this.dialogNode=e,null===this.dialogNode||"dialog"!==this.dialogNode.getAttribute("role"))throw new Error("Dialog() requires a DOM element with ARIA role of dialog.");"string"==typeof t?this.focusAfterClosed=document.getElementById(t):"object"===(void 0===t?"undefined":Gr(t))?this.focusAfterClosed=t:this.focusAfterClosed=null,"string"==typeof n?this.focusFirst=document.getElementById(n):"object"===(void 0===n?"undefined":Gr(n))?this.focusFirst=n:this.focusFirst=null,this.focusFirst?this.focusFirst.focus():et.focusFirstDescendant(this.dialogNode),this.lastFocus=document.activeElement,Hr=function(e){i.trapFocus(e)},this.addListeners()},qr.Dialog.prototype.addListeners=function(){document.addEventListener("focus",Hr,!0)},qr.Dialog.prototype.removeListeners=function(){document.removeEventListener("focus",Hr,!0)},qr.Dialog.prototype.closeDialog=function(){var e=this;this.removeListeners(),this.focusAfterClosed&&setTimeout(function(){e.focusAfterClosed.focus()})},qr.Dialog.prototype.trapFocus=function(e){et.IgnoreUtilFocusChanges||(this.dialogNode.contains(e.target)?this.lastFocus=e.target:(et.focusFirstDescendant(this.dialogNode),this.lastFocus===document.activeElement&&et.focusLastDescendant(this.dialogNode),this.lastFocus=document.activeElement))};var Zr=qr.Dialog,Kr=void 0,Jr={success:"success",info:"info",warning:"warning",error:"error"},Xr={mixins:[A,c],props:{modal:{default:!0},lockScroll:{default:!0},showClose:{type:Boolean,default:!0},closeOnClickModal:{default:!0},closeOnPressEscape:{default:!0},closeOnHashChange:{default:!0},center:{default:!1,type:Boolean},roundButton:{default:!1,type:Boolean}},components:{ElInput:M,ElButton:ze},computed:{icon:function(){var e=this.type;return this.iconClass||(e&&Jr[e]?"el-icon-"+Jr[e]:"")},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.visible&&(this.visible=!1,this._closing=!0,this.onClose&&this.onClose(),Kr.closeDialog(),this.lockScroll&&setTimeout(this.restoreBodyStyle,200),this.opened=!1,this.doAfterClose(),setTimeout(function(){e.action&&e.callback(e.action,e)}))},handleWrapperClick:function(){this.closeOnClickModal&&this.handleAction(this.distinguishCancelAndClose?"close":"cancel")},handleInputEnter:function(){if("textarea"!==this.inputType)return this.handleAction("confirm")},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||Object(u.b)("el.messagebox.error"),Object(C.a)(this.getInputElement(),"invalid"),!1;var t=this.inputValidator;if("function"==typeof t){var n=t(this.inputValue);if(!1===n)return this.editorErrorMessage=this.inputErrorMessage||Object(u.b)("el.messagebox.error"),Object(C.a)(this.getInputElement(),"invalid"),!1;if("string"==typeof n)return this.editorErrorMessage=n,Object(C.a)(this.getInputElement(),"invalid"),!1}}return this.editorErrorMessage="",Object(C.g)(this.getInputElement(),"invalid"),!0},getFirstFocus:function(){var e=this.$el.querySelector(".el-message-box__btns .el-button"),t=this.$el.querySelector(".el-message-box__btns .el-message-box__title");return e||t},getInputElement:function(){var e=this.$refs.input.$refs;return e.input||e.textarea}},watch:{inputValue:{immediate:!0,handler:function(e){var t=this;this.$nextTick(function(n){"prompt"===t.$type&&null!==e&&t.validate()})}},visible:function(e){var t=this;e&&(this.uid++,"alert"!==this.$type&&"confirm"!==this.$type||this.$nextTick(function(){t.$refs.confirm.$el.focus()}),this.focusAfterClosed=document.activeElement,Kr=new Zr(this.$el,this.focusAfterClosed,this.getFirstFocus())),"prompt"===this.$type&&(e?setTimeout(function(){t.$refs.input&&t.$refs.input.$el&&t.getInputElement().focus()},500):(this.editorErrorMessage="",Object(C.g)(this.getInputElement(),"invalid")))}},mounted:function(){var e=this;this.$nextTick(function(){e.closeOnHashChange&&window.addEventListener("hashchange",e.close)})},beforeDestroy:function(){this.closeOnHashChange&&window.removeEventListener("hashchange",this.close),setTimeout(function(){Kr.closeDialog()})},data:function(){return{uid:1,title:void 0,message:"",type:"",iconClass:"",customClass:"",showInput:!1,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,action:"",confirmButtonText:"",cancelButtonText:"",confirmButtonLoading:!1,cancelButtonLoading:!1,confirmButtonClass:"",confirmButtonDisabled:!1,cancelButtonClass:"",editorErrorMessage:null,callback:null,dangerouslyUseHTMLString:!1,focusAfterClosed:null,isOnComposition:!1,distinguishCancelAndClose:!1}}},eo=Object(r.a)(Xr,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"msgbox-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-message-box__wrapper",attrs:{tabindex:"-1",role:"dialog","aria-modal":"true","aria-label":e.title||"dialog"},on:{click:function(t){return t.target!==t.currentTarget?null:e.handleWrapperClick(t)}}},[n("div",{staticClass:"el-message-box",class:[e.customClass,e.center&&"el-message-box--center"]},[null!==e.title?n("div",{staticClass:"el-message-box__header"},[n("div",{staticClass:"el-message-box__title"},[e.icon&&e.center?n("div",{class:["el-message-box__status",e.icon]}):e._e(),n("span",[e._v(e._s(e.title))])]),e.showClose?n("button",{staticClass:"el-message-box__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:function(t){e.handleAction(e.distinguishCancelAndClose?"close":"cancel")},keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key,"Enter"))return null;e.handleAction(e.distinguishCancelAndClose?"close":"cancel")}}},[n("i",{staticClass:"el-message-box__close el-icon-close"})]):e._e()]):e._e(),n("div",{staticClass:"el-message-box__content"},[e.icon&&!e.center&&""!==e.message?n("div",{class:["el-message-box__status",e.icon]}):e._e(),""!==e.message?n("div",{staticClass:"el-message-box__message"},[e._t("default",[e.dangerouslyUseHTMLString?n("p",{domProps:{innerHTML:e._s(e.message)}}):n("p",[e._v(e._s(e.message))])])],2):e._e(),n("div",{directives:[{name:"show",rawName:"v-show",value:e.showInput,expression:"showInput"}],staticClass:"el-message-box__input"},[n("el-input",{ref:"input",attrs:{type:e.inputType,placeholder:e.inputPlaceholder},nativeOn:{keydown:function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?e.handleInputEnter(t):null}},model:{value:e.inputValue,callback:function(t){e.inputValue=t},expression:"inputValue"}}),n("div",{staticClass:"el-message-box__errormsg",style:{visibility:e.editorErrorMessage?"visible":"hidden"}},[e._v(e._s(e.editorErrorMessage))])],1)]),n("div",{staticClass:"el-message-box__btns"},[e.showCancelButton?n("el-button",{class:[e.cancelButtonClasses],attrs:{loading:e.cancelButtonLoading,round:e.roundButton,size:"small"},on:{keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key,"Enter"))return null;e.handleAction("cancel")}},nativeOn:{click:function(t){e.handleAction("cancel")}}},[e._v("\n "+e._s(e.cancelButtonText||e.t("el.messagebox.cancel"))+"\n ")]):e._e(),n("el-button",{directives:[{name:"show",rawName:"v-show",value:e.showConfirmButton,expression:"showConfirmButton"}],ref:"confirm",class:[e.confirmButtonClasses],attrs:{loading:e.confirmButtonLoading,round:e.roundButton,size:"small"},on:{keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key,"Enter"))return null;e.handleAction("confirm")}},nativeOn:{click:function(t){e.handleAction("confirm")}}},[e._v("\n "+e._s(e.confirmButtonText||e.t("el.messagebox.confirm"))+"\n ")])],1)])])])},[],!1,null,null,null);eo.options.__file="main.vue";var to=eo.exports,no="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},io={title:null,message:"",type:"",iconClass:"",showInput:!1,showClose:!0,modalFade:!0,lockScroll:!0,closeOnClickModal:!0,closeOnPressEscape:!0,closeOnHashChange:!0,inputValue:null,inputPlaceholder:"",inputType:"text",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,confirmButtonPosition:"right",confirmButtonHighlight:!1,cancelButtonHighlight:!1,confirmButtonText:"",cancelButtonText:"",confirmButtonClass:"",cancelButtonClass:"",customClass:"",beforeClose:null,dangerouslyUseHTMLString:!1,center:!1,roundButton:!1,distinguishCancelAndClose:!1},ro=w.a.extend(to),oo=void 0,so=void 0,ao=[],lo=function(e){if(oo){var t=oo.callback;"function"==typeof t&&(so.showInput?t(so.inputValue,e):t(e)),oo.resolve&&("confirm"===e?so.showInput?oo.resolve({value:so.inputValue,action:e}):oo.resolve(e):!oo.reject||"cancel"!==e&&"close"!==e||oo.reject(e))}},uo=function e(){if(so||((so=new ro({el:document.createElement("div")})).callback=lo),so.action="",(!so.visible||so.closeTimer)&&ao.length>0){var t=(oo=ao.shift()).options;for(var n in t)t.hasOwnProperty(n)&&(so[n]=t[n]);void 0===t.callback&&(so.callback=lo);var i=so.callback;so.callback=function(t,n){i(t,n),e()},bt(so.message)?(so.$slots.default=[so.message],so.message=null):delete so.$slots.default,["modal","showClose","closeOnClickModal","closeOnPressEscape","closeOnHashChange"].forEach(function(e){void 0===so[e]&&(so[e]=!0)}),document.body.appendChild(so.$el),w.a.nextTick(function(){so.visible=!0})}},co=function e(t,n){if(!w.a.prototype.$isServer){if("string"==typeof t||bt(t)?(t={message:t},"string"==typeof arguments[1]&&(t.title=arguments[1])):t.callback&&!n&&(n=t.callback),"undefined"!=typeof Promise)return new Promise(function(i,r){ao.push({options:g({},io,e.defaults,t),callback:n,resolve:i,reject:r}),uo()});ao.push({options:g({},io,e.defaults,t),callback:n}),uo()}};co.setDefaults=function(e){co.defaults=e},co.alert=function(e,t,n){return"object"===(void 0===t?"undefined":no(t))?(n=t,t=""):void 0===t&&(t=""),co(g({title:t,message:e,$type:"alert",closeOnPressEscape:!1,closeOnClickModal:!1},n))},co.confirm=function(e,t,n){return"object"===(void 0===t?"undefined":no(t))?(n=t,t=""):void 0===t&&(t=""),co(g({title:t,message:e,$type:"confirm",showCancelButton:!0},n))},co.prompt=function(e,t,n){return"object"===(void 0===t?"undefined":no(t))?(n=t,t=""):void 0===t&&(t=""),co(g({title:t,message:e,showCancelButton:!0,showInput:!0,$type:"prompt"},n))},co.close=function(){so.doClose(),so.visible=!1,ao=[],oo=null};var ho=co,po={name:"ElBreadcrumb",props:{separator:{type:String,default:"/"},separatorClass:{type:String,default:""}},provide:function(){return{elBreadcrumb:this}},mounted:function(){var e=this.$el.querySelectorAll(".el-breadcrumb__item");e.length&&e[e.length-1].setAttribute("aria-current","page")}},fo=Object(r.a)(po,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-breadcrumb",attrs:{"aria-label":"Breadcrumb",role:"navigation"}},[this._t("default")],2)},[],!1,null,null,null);fo.options.__file="breadcrumb.vue";var mo=fo.exports;mo.install=function(e){e.component(mo.name,mo)};var go=mo,vo={name:"ElBreadcrumbItem",props:{to:{},replace:Boolean},data:function(){return{separator:"",separatorClass:""}},inject:["elBreadcrumb"],mounted:function(){var e=this;this.separator=this.elBreadcrumb.separator,this.separatorClass=this.elBreadcrumb.separatorClass;var t=this.$refs.link;t.setAttribute("role","link"),t.addEventListener("click",function(t){var n=e.to,i=e.$router;n&&i&&(e.replace?i.replace(n):i.push(n))})}},yo=Object(r.a)(vo,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-breadcrumb__item"},[t("span",{ref:"link",class:["el-breadcrumb__inner",this.to?"is-link":""],attrs:{role:"link"}},[this._t("default")],2),this.separatorClass?t("i",{staticClass:"el-breadcrumb__separator",class:this.separatorClass}):t("span",{staticClass:"el-breadcrumb__separator",attrs:{role:"presentation"}},[this._v(this._s(this.separator))])])},[],!1,null,null,null);yo.options.__file="breadcrumb-item.vue";var bo=yo.exports;bo.install=function(e){e.component(bo.name,bo)};var Mo=bo,wo={name:"ElForm",componentName:"ElForm",provide:function(){return{elForm:this}},props:{model:Object,rules:Object,labelPosition:String,labelWidth:String,labelSuffix:{type:String,default:""},inline:Boolean,inlineMessage:Boolean,statusIcon:Boolean,showMessage:{type:Boolean,default:!0},size:String,disabled:Boolean,validateOnRuleChange:{type:Boolean,default:!0},hideRequiredAsterisk:{type:Boolean,default:!1}},watch:{rules:function(){this.validateOnRuleChange&&this.validate(function(){})}},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.model?this.fields.forEach(function(e){e.resetField()}):console.warn("[Element Warn][Form]model is required for resetFields to work.")},clearValidate:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];(e.length?"string"==typeof e?this.fields.filter(function(t){return e===t.prop}):this.fields.filter(function(t){return e.indexOf(t.prop)>-1}):this.fields).forEach(function(e){e.clearValidate()})},validate:function(e){var t=this;if(this.model){var n=void 0;"function"!=typeof e&&window.Promise&&(n=new window.Promise(function(t,n){e=function(e){e?t(e):n(e)}}));var i=!0,r=0;0===this.fields.length&&e&&e(!0);var o={};return this.fields.forEach(function(n){n.validate("",function(n,s){n&&(i=!1),o=g({},o,s),"function"==typeof e&&++r===t.fields.length&&e(i,o)})}),n||void 0}console.warn("[Element Warn][Form]model is required for validate to work!")},validateField:function(e,t){e=[].concat(e);var n=this.fields.filter(function(t){return-1!==e.indexOf(t.prop)});n.length?n.forEach(function(e){e.validate("",t)}):console.warn("[Element Warn]please pass correct props!")}}},Co=Object(r.a)(wo,function(){var e=this.$createElement;return(this._self._c||e)("form",{staticClass:"el-form",class:[this.labelPosition?"el-form--label-"+this.labelPosition:"",{"el-form--inline":this.inline}]},[this._t("default")],2)},[],!1,null,null,null);Co.options.__file="form.vue";var xo=Co.exports;xo.install=function(e){e.component(xo.name,xo)};var No=xo,Do=n(9),_o=n.n(Do),Io=n(6),ko=n.n(Io),jo=/%[sdj%]/g,To=function(){};function So(){for(var e=arguments.length,t=Array(e),n=0;n=o)return e;switch(e){case"%s":return String(t[i++]);case"%d":return Number(t[i++]);case"%j":try{return JSON.stringify(t[i++])}catch(e){return"[Circular]"}break;default:return e}}),a=t[i];i()\[\]\\.,;:\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},Uo={integer:function(e){return Uo.number(e)&&parseInt(e,10)===e},float:function(e){return Uo.number(e)&&!Uo.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"===(void 0===e?"undefined":ko()(e))&&!Uo.array(e)},method:function(e){return"function"==typeof e},email:function(e){return"string"==typeof e&&!!e.match(Fo.email)&&e.length<255},url:function(e){return"string"==typeof e&&!!e.match(Fo.url)},hex:function(e){return"string"==typeof e&&!!e.match(Fo.hex)}};var Yo=function(e,t,n,i,r){if(e.required&&void 0===t)$o(e,t,n,i,r);else{var o=e.type;["integer","float","array","regexp","object","method","email","number","date","url","hex"].indexOf(o)>-1?Uo[o](t)||i.push(So(r.messages.types[o],e.fullField,e.type)):o&&(void 0===t?"undefined":ko()(t))!==e.type&&i.push(So(r.messages.types[o],e.fullField,e.type))}};var Ro="enum";var Bo={required:$o,whitespace:Po,type:Yo,range:function(e,t,n,i,r){var o="number"==typeof e.len,s="number"==typeof e.min,a="number"==typeof e.max,l=t,u=null,c="number"==typeof t,h="string"==typeof t,d=Array.isArray(t);if(c?u="number":h?u="string":d&&(u="array"),!u)return!1;d&&(l=t.length),h&&(l=t.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,"_").length),o?l!==e.len&&i.push(So(r.messages[u].len,e.fullField,e.len)):s&&!a&&le.max?i.push(So(r.messages[u].max,e.fullField,e.max)):s&&a&&(le.max)&&i.push(So(r.messages[u].range,e.fullField,e.min,e.max))},enum:function(e,t,n,i,r){e[Ro]=Array.isArray(e[Ro])?e[Ro]:[],-1===e[Ro].indexOf(t)&&i.push(So(r.messages[Ro],e.fullField,e[Ro].join(", ")))},pattern:function(e,t,n,i,r){e.pattern&&(e.pattern instanceof RegExp?(e.pattern.lastIndex=0,e.pattern.test(t)||i.push(So(r.messages.pattern.mismatch,e.fullField,t,e.pattern))):"string"==typeof e.pattern&&(new RegExp(e.pattern).test(t)||i.push(So(r.messages.pattern.mismatch,e.fullField,t,e.pattern))))}};var Qo="enum";var Vo=function(e,t,n,i,r){var o=e.type,s=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t,o)&&!e.required)return n();Bo.required(e,t,i,s,r,o),Lo(t,o)||Bo.type(e,t,i,s,r)}n(s)},Ho={string:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t,"string")&&!e.required)return n();Bo.required(e,t,i,o,r,"string"),Lo(t,"string")||(Bo.type(e,t,i,o,r),Bo.range(e,t,i,o,r),Bo.pattern(e,t,i,o,r),!0===e.whitespace&&Bo.whitespace(e,t,i,o,r))}n(o)},method:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),void 0!==t&&Bo.type(e,t,i,o,r)}n(o)},number:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),void 0!==t&&(Bo.type(e,t,i,o,r),Bo.range(e,t,i,o,r))}n(o)},boolean:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),void 0!==t&&Bo.type(e,t,i,o,r)}n(o)},regexp:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),Lo(t)||Bo.type(e,t,i,o,r)}n(o)},integer:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),void 0!==t&&(Bo.type(e,t,i,o,r),Bo.range(e,t,i,o,r))}n(o)},float:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),void 0!==t&&(Bo.type(e,t,i,o,r),Bo.range(e,t,i,o,r))}n(o)},array:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t,"array")&&!e.required)return n();Bo.required(e,t,i,o,r,"array"),Lo(t,"array")||(Bo.type(e,t,i,o,r),Bo.range(e,t,i,o,r))}n(o)},object:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),void 0!==t&&Bo.type(e,t,i,o,r)}n(o)},enum:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();Bo.required(e,t,i,o,r),t&&Bo[Qo](e,t,i,o,r)}n(o)},pattern:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t,"string")&&!e.required)return n();Bo.required(e,t,i,o,r),Lo(t,"string")||Bo.pattern(e,t,i,o,r)}n(o)},date:function(e,t,n,i,r){var o=[];if(e.required||!e.required&&i.hasOwnProperty(e.field)){if(Lo(t)&&!e.required)return n();if(Bo.required(e,t,i,o,r),!Lo(t)){var s=void 0;s="number"==typeof t?new Date(t):t,Bo.type(e,s,i,o,r),s&&Bo.range(e,s.getTime(),i,o,r)}}n(o)},url:Vo,hex:Vo,email:Vo,required:function(e,t,n,i,r){var o=[],s=Array.isArray(t)?"array":void 0===t?"undefined":ko()(t);Bo.required(e,t,i,o,r,s),n(o)}};function Wo(){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}}}var Go=Wo();function qo(e){this.rules=null,this._messages=Go,this.define(e)}qo.prototype={messages:function(e){return e&&(this._messages=zo(Wo(),e)),this._messages},define:function(e){if(!e)throw new Error("Cannot configure a schema with no rules");if("object"!==(void 0===e?"undefined":ko()(e))||Array.isArray(e))throw new Error("Rules must be an object");this.rules={};var t=void 0,n=void 0;for(t in e)e.hasOwnProperty(t)&&(n=e[t],this.rules[t]=Array.isArray(n)?n:[n])},validate:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=arguments[2],r=e,o=n,s=i;if("function"==typeof o&&(s=o,o={}),this.rules&&0!==Object.keys(this.rules).length){if(o.messages){var a=this.messages();a===Go&&(a=Wo()),zo(a,o.messages),o.messages=a}else o.messages=this.messages();var l=void 0,u=void 0,c={};(o.keys||Object.keys(this.rules)).forEach(function(n){l=t.rules[n],u=r[n],l.forEach(function(i){var o=i;"function"==typeof o.transform&&(r===e&&(r=_o()({},r)),u=r[n]=o.transform(u)),(o="function"==typeof o?{validator:o}:_o()({},o)).validator=t.getValidationMethod(o),o.field=n,o.fullField=o.fullField||n,o.type=t.getType(o),o.validator&&(c[n]=c[n]||[],c[n].push({rule:o,value:u,source:r,field:n}))})});var h={};Ao(c,o,function(e,t){var n=e.rule,i=!("object"!==n.type&&"array"!==n.type||"object"!==ko()(n.fields)&&"object"!==ko()(n.defaultField));function r(e,t){return _o()({},t,{fullField:n.fullField+"."+e})}function s(){var s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];if(Array.isArray(s)||(s=[s]),s.length&&To("async-validator:",s),s.length&&n.message&&(s=[].concat(n.message)),s=s.map(Eo(n)),o.first&&s.length)return h[n.field]=1,t(s);if(i){if(n.required&&!e.value)return s=n.message?[].concat(n.message).map(Eo(n)):o.error?[o.error(n,So(o.messages.required,n.field))]:[],t(s);var a={};if(n.defaultField)for(var l in e.value)e.value.hasOwnProperty(l)&&(a[l]=n.defaultField);for(var u in a=_o()({},a,e.rule.fields))if(a.hasOwnProperty(u)){var c=Array.isArray(a[u])?a[u]:[a[u]];a[u]=c.map(r.bind(null,u))}var d=new qo(a);d.messages(o.messages),e.rule.options&&(e.rule.options.messages=o.messages,e.rule.options.error=o.error),d.validate(e.value,e.rule.options||o,function(e){t(e&&e.length?s.concat(e):e)})}else t(s)}i=i&&(n.required||!n.required&&e.value),n.field=e.field;var a=n.validator(n,e.value,s,e.source,o);a&&a.then&&a.then(function(){return s()},function(e){return s(e)})},function(e){!function(e){var t,n=void 0,i=void 0,r=[],o={};for(n=0;n1&&void 0!==arguments[1]?arguments[1]:Y.k;this.validateDisabled=!1;var i=this.getFilteredRule(e);if((!i||0===i.length)&&void 0===this.required)return n(),!0;this.validateState="validating";var r={};i&&i.length>0&&i.forEach(function(e){delete e.trigger}),r[this.prop]=i;var o=new Zo(r),s={};s[this.prop]=this.fieldValue,o.validate(s,{firstFields:!0},function(e,i){t.validateState=e?"error":"success",t.validateMessage=e?e[0].message:"",n(t.validateMessage,i),t.elForm&&t.elForm.$emit("validate",t.prop,!e,t.validateMessage||null)})},clearValidate:function(){this.validateState="",this.validateMessage="",this.validateDisabled=!1},resetField:function(){this.validateState="",this.validateMessage="";var e=this.form.model,t=this.fieldValue,n=this.prop;-1!==n.indexOf(":")&&(n=n.replace(/:/,"."));var i=Object(Y.f)(e,n,!0);this.validateDisabled=!0,Array.isArray(t)?i.o[i.k]=[].concat(this.initialValue):i.o[i.k]=this.initialValue,this.broadcast("ElTimeSelect","fieldReset",this.initialValue)},getRules:function(){var e=this.form.rules,t=this.rules,n=void 0!==this.required?{required:!!this.required}:[],i=Object(Y.f)(e,this.prop||"");return e=e?i.o[this.prop||""]||i.v:[],[].concat(t||e||[]).concat(n)},getFilteredRule:function(e){return this.getRules().filter(function(t){return!t.trigger||""===e||(Array.isArray(t.trigger)?t.trigger.indexOf(e)>-1:t.trigger===e)}).map(function(e){return g({},e)})},onFieldBlur:function(){this.validate("blur")},onFieldChange:function(){this.validateDisabled?this.validateDisabled=!1:this.validate("change")}},mounted:function(){if(this.prop){this.dispatch("ElForm","el.form.addField",[this]);var e=this.fieldValue;Array.isArray(e)&&(e=[].concat(e)),Object.defineProperty(this,"initialValue",{value:e}),(this.getRules().length||void 0!==this.required)&&(this.$on("el.form.blur",this.onFieldBlur),this.$on("el.form.change",this.onFieldChange))}},beforeDestroy:function(){this.dispatch("ElForm","el.form.removeField",[this])}},Jo=Object(r.a)(Ko,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-form-item",class:[{"el-form-item--feedback":e.elForm&&e.elForm.statusIcon,"is-error":"error"===e.validateState,"is-validating":"validating"===e.validateState,"is-success":"success"===e.validateState,"is-required":e.isRequired||e.required,"is-no-asterisk":e.elForm&&e.elForm.hideRequiredAsterisk},e.sizeClass?"el-form-item--"+e.sizeClass:""]},[e.label||e.$slots.label?n("label",{staticClass:"el-form-item__label",style:e.labelStyle,attrs:{for:e.labelFor}},[e._t("label",[e._v(e._s(e.label+e.form.labelSuffix))])],2):e._e(),n("div",{staticClass:"el-form-item__content",style:e.contentStyle},[e._t("default"),n("transition",{attrs:{name:"el-zoom-in-top"}},["error"===e.validateState&&e.showMessage&&e.form.showMessage?e._t("error",[n("div",{staticClass:"el-form-item__error",class:{"el-form-item__error--inline":"boolean"==typeof e.inlineMessage?e.inlineMessage:e.elForm&&e.elForm.inlineMessage||!1}},[e._v("\n "+e._s(e.validateMessage)+"\n ")])],{error:e.validateMessage}):e._e()],2)],2)])},[],!1,null,null,null);Jo.options.__file="form-item.vue";var Xo=Jo.exports;Xo.install=function(e){e.component(Xo.name,Xo)};var es=Xo,ts={name:"TabBar",props:{tabs:Array},inject:["rootTabs"],computed:{barStyle:{get:function(){var e=this;if(!this.$parent.$refs.tabs)return{};var t={},n=0,i=0,r=-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height",o="width"===r?"x":"y",s=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})};this.tabs.every(function(t,o){var a=Object(Y.a)(e.$parent.$refs.tabs,function(e){return e.id.replace("tab-","")===t.paneName});return!!a&&(t.active?(i=a["client"+s(r)],"width"===r&&e.tabs.length>1&&(i-=0===o||o===e.tabs.length-1?20:40),!1):(n+=a["client"+s(r)],!0))}),"width"===r&&0!==n&&(n+=20);var a="translate"+s(o)+"("+n+"px)";return t[r]=i+"px",t.transform=a,t.msTransform=a,t.webkitTransform=a,t}}}},ns=Object(r.a)(ts,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-tabs__active-bar",class:"is-"+this.rootTabs.tabPosition,style:this.barStyle})},[],!1,null,null,null);ns.options.__file="tab-bar.vue";var is=ns.exports;function rs(){}var os=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})},ss={name:"TabNav",components:{TabBar:is},inject:["rootTabs"],props:{panes:Array,currentName:String,editable:Boolean,onTabClick:{type:Function,default:rs},onTabRemove:{type:Function,default:rs},type:String,stretch:Boolean},data:function(){return{scrollable:!1,navOffset:0,isFocus:!1,focusable:!0}},computed:{navStyle:function(){return{transform:"translate"+(-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"X":"Y")+"(-"+this.navOffset+"px)"}},sizeName:function(){return-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height"}},methods:{scrollPrev:function(){var e=this.$refs.navScroll["offset"+os(this.sizeName)],t=this.navOffset;if(t){var n=t>e?t-e:0;this.navOffset=n}},scrollNext:function(){var e=this.$refs.nav["offset"+os(this.sizeName)],t=this.$refs.navScroll["offset"+os(this.sizeName)],n=this.navOffset;if(!(e-n<=t)){var i=e-n>2*t?n+t:e-t;this.navOffset=i}},scrollToActiveTab:function(){if(this.scrollable){var e=this.$refs.nav,t=this.$el.querySelector(".is-active");if(t){var n=this.$refs.navScroll,i=t.getBoundingClientRect(),r=n.getBoundingClientRect(),o=e.offsetWidth-r.width,s=this.navOffset,a=s;i.leftr.right&&(a=s+i.right-r.right),a=Math.max(a,0),this.navOffset=Math.min(a,o)}}},update:function(){if(this.$refs.nav){var e=this.sizeName,t=this.$refs.nav["offset"+os(e)],n=this.$refs.navScroll["offset"+os(e)],i=this.navOffset;if(n0&&(this.navOffset=0)}},changeTab:function(e){var t=e.keyCode,n=void 0,i=void 0,r=void 0;-1!==[37,38,39,40].indexOf(t)&&(r=e.currentTarget.querySelectorAll("[role=tab]"),i=Array.prototype.indexOf.call(r,e.target),r[n=37===t||38===t?0===i?r.length-1:i-1:i0&&i.lazy&&i.defaultExpandAll&&this.expand(),Array.isArray(this.data)||vs(this,this.data),this.data){var s=i.defaultExpandedKeys,a=i.key;a&&s&&-1!==s.indexOf(this.key)&&this.expand(null,i.autoExpandParent),a&&void 0!==i.currentNodeKey&&this.key===i.currentNodeKey&&(i.currentNode=this),i.lazy&&i._initDefaultCheckedNode(this),this.updateLeafState()}}return e.prototype.setData=function(e){Array.isArray(e)||vs(this,e),this.data=e,this.childNodes=[];for(var t=void 0,n=0,i=(t=0===this.level&&this.data instanceof Array?this.data:Cs(this,"children")||[]).length;n1&&void 0!==arguments[1])||arguments[1];return function n(i){for(var r=i.childNodes||[],o=!1,s=0,a=r.length;s-1&&t.splice(n,1);var i=this.childNodes.indexOf(e);i>-1&&(this.store&&this.store.deregisterNode(e),e.parent=null,this.childNodes.splice(i,1)),this.updateLeafState()},e.prototype.removeChildByData=function(e){for(var t=null,n=0;n0;)i.expanded=!0,i=i.parent;n.expanded=!0,e&&e()};this.shouldLoadData()?this.loadData(function(e){e instanceof Array&&(n.checked?n.setChecked(!0,!0):n.store.checkStrictly||ws(n),i())}):i()},e.prototype.doCreateChildren=function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.forEach(function(e){t.insertChild(g({data:e},n),void 0,!0)})},e.prototype.collapse=function(){this.expanded=!1},e.prototype.shouldLoadData=function(){return!0===this.store.lazy&&this.store.load&&!this.loaded},e.prototype.updateLeafState=function(){if(!0!==this.store.lazy||!0===this.loaded||void 0===this.isLeafByUser){var e=this.childNodes;!this.store.lazy||!0===this.store.lazy&&!0===this.loaded?this.isLeaf=!e||0===e.length:this.isLeaf=!1}else this.isLeaf=this.isLeafByUser},e.prototype.setChecked=function(e,t,n,i){var r=this;if(this.indeterminate="half"===e,this.checked=!0===e,!this.store.checkStrictly){if(!this.shouldLoadData()||this.store.checkDescendants){var o=Ms(this.childNodes),s=o.all,a=o.allWithoutDisable;this.isLeaf||s||!a||(this.checked=!1,e=!1);var l=function(){if(t){for(var n=r.childNodes,o=0,s=n.length;o0&&void 0!==arguments[0]&&arguments[0];if(0===this.level)return this.data;var t=this.data;if(!t)return null;var n=this.store.props,i="children";return n&&(i=n.children||"children"),void 0===t[i]&&(t[i]=null),e&&!t[i]&&(t[i]=[]),t[i]},e.prototype.updateChildren=function(){var e=this,t=this.getChildren()||[],n=this.childNodes.map(function(e){return e.data}),i={},r=[];t.forEach(function(e,t){e[gs]?i[e[gs]]={index:t,data:e}:r.push({index:t,data:e})}),this.store.lazy||n.forEach(function(t){i[t[gs]]||e.removeChildByData(t)}),r.forEach(function(t){var n=t.index,i=t.data;e.insertChild({data:i},n)}),this.updateLeafState()},e.prototype.loadData=function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!0!==this.store.lazy||!this.store.load||this.loaded||this.loading&&!Object.keys(n).length)e&&e.call(this);else{this.loading=!0;this.store.load(this,function(i){t.loaded=!0,t.loading=!1,t.childNodes=[],t.doCreateChildren(i,n),t.updateLeafState(),ws(t),e&&e.call(t,i)})}},bs(e,[{key:"label",get:function(){return Cs(this,"label")}},{key:"key",get:function(){var e=this.store.key;return this.data?this.data[e]:null}},{key:"disabled",get:function(){return Cs(this,"disabled")}},{key:"nextSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(t>-1)return e.childNodes[t+1]}return null}},{key:"previousSibling",get:function(){var e=this.parent;if(e){var t=e.childNodes.indexOf(this);if(t>-1)return t>0?e.childNodes[t-1]:null}return null}}]),e}(),Ds="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};var _s=function(){function e(t){var n=this;for(var i in function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.currentNode=null,this.currentNodeKey=null,t)t.hasOwnProperty(i)&&(this[i]=t[i]);(this.nodesMap={},this.root=new Ns({data:this.data,store:this}),this.lazy&&this.load)?(0,this.load)(this.root,function(e){n.root.doCreateChildren(e),n._initDefaultCheckedNodes()}):this._initDefaultCheckedNodes()}return e.prototype.filter=function(e){var t=this.filterNodeMethod,n=this.lazy;!function i(r){var o=r.root?r.root.childNodes:r.childNodes;if(o.forEach(function(n){n.visible=t.call(n,e,n.data,n),i(n)}),!r.visible&&o.length){var s=!0;o.forEach(function(e){e.visible&&(s=!1)}),r.root?r.root.visible=!1===s:r.visible=!1===s}e&&(!r.visible||r.isLeaf||n||r.expand())}(this)},e.prototype.setData=function(e){e!==this.root.data?(this.root.setData(e),this._initDefaultCheckedNodes()):this.root.updateChildren()},e.prototype.getNode=function(e){if(e instanceof Ns)return e;var t="object"!==(void 0===e?"undefined":Ds(e))?e:ys(this.key,e);return this.nodesMap[t]||null},e.prototype.insertBefore=function(e,t){var n=this.getNode(t);n.parent.insertBefore({data:e},n)},e.prototype.insertAfter=function(e,t){var n=this.getNode(t);n.parent.insertAfter({data:e},n)},e.prototype.remove=function(e){var t=this.getNode(e);t&&t.parent&&t.parent.removeChild(t)},e.prototype.append=function(e,t){var n=t?this.getNode(t):this.root;n&&n.insertChild({data:e})},e.prototype._initDefaultCheckedNodes=function(){var e=this,t=this.defaultCheckedKeys||[],n=this.nodesMap;t.forEach(function(t){var i=n[t];i&&i.setChecked(!0,!e.checkStrictly)})},e.prototype._initDefaultCheckedNode=function(e){-1!==(this.defaultCheckedKeys||[]).indexOf(e.key)&&e.setChecked(!0,!this.checkStrictly)},e.prototype.setDefaultCheckedKey=function(e){e!==this.defaultCheckedKeys&&(this.defaultCheckedKeys=e,this._initDefaultCheckedNodes())},e.prototype.registerNode=function(e){this.key&&e&&e.data&&(void 0!==e.key&&(this.nodesMap[e.key]=e))},e.prototype.deregisterNode=function(e){var t=this;this.key&&e&&e.data&&(e.childNodes.forEach(function(e){t.deregisterNode(e)}),delete this.nodesMap[e.key])},e.prototype.getCheckedNodes=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=[];return function i(r){(r.root?r.root.childNodes:r.childNodes).forEach(function(r){(r.checked||t&&r.indeterminate)&&(!e||e&&r.isLeaf)&&n.push(r.data),i(r)})}(this),n},e.prototype.getCheckedKeys=function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return this.getCheckedNodes(t).map(function(t){return(t||{})[e.key]})},e.prototype.getHalfCheckedNodes=function(){var e=[];return function t(n){(n.root?n.root.childNodes:n.childNodes).forEach(function(n){n.indeterminate&&e.push(n.data),t(n)})}(this),e},e.prototype.getHalfCheckedKeys=function(){var e=this;return this.getHalfCheckedNodes().map(function(t){return(t||{})[e.key]})},e.prototype._getAllNodes=function(){var e=[],t=this.nodesMap;for(var n in t)t.hasOwnProperty(n)&&e.push(t[n]);return e},e.prototype.updateChildren=function(e,t){var n=this.nodesMap[e];if(n){for(var i=n.childNodes,r=i.length-1;r>=0;r--){var o=i[r];this.remove(o.data)}for(var s=0,a=t.length;s1&&void 0!==arguments[1]&&arguments[1],n=arguments[2],i=this._getAllNodes().sort(function(e,t){return t.level-e.level}),r=Object.create(null),o=Object.keys(n);i.forEach(function(e){return e.setChecked(!1,!1)});for(var s=0,a=i.length;s-1){for(var c=l.parent;c&&c.level>0;)r[c.data[e]]=!0,c=c.parent;l.isLeaf||this.checkStrictly?l.setChecked(!0,!1):(l.setChecked(!0,!0),t&&function(){l.setChecked(!1,!1);!function e(t){t.childNodes.forEach(function(t){t.isLeaf||t.setChecked(!1,!1),e(t)})}(l)}())}else l.checked&&!r[u]&&l.setChecked(!1,!1)}},e.prototype.setCheckedNodes=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=this.key,i={};e.forEach(function(e){i[(e||{})[n]]=!0}),this._setCheckedKeys(n,t,i)},e.prototype.setCheckedKeys=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.defaultCheckedKeys=e;var n=this.key,i={};e.forEach(function(e){i[e]=!0}),this._setCheckedKeys(n,t,i)},e.prototype.setDefaultExpandedKeys=function(e){var t=this;e=e||[],this.defaultExpandedKeys=e,e.forEach(function(e){var n=t.getNode(e);n&&n.expand(null,t.autoExpandParent)})},e.prototype.setChecked=function(e,t,n){var i=this.getNode(e);i&&i.setChecked(!!t,n)},e.prototype.getCurrentNode=function(){return this.currentNode},e.prototype.setCurrentNode=function(e){this.currentNode=e},e.prototype.setUserCurrentNode=function(e){var t=e[this.key],n=this.nodesMap[t];this.setCurrentNode(n)},e.prototype.setCurrentNodeKey=function(e){if(null!==e){var t=this.getNode(e);t&&(this.currentNode=t)}else this.currentNode=null},e}(),Is={name:"ElTreeNode",componentName:"ElTreeNode",mixins:[a],props:{node:{default:function(){return{}}},props:{},renderContent:Function,renderAfterExpand:{type:Boolean,default:!0},showCheckbox:{type:Boolean,default:!1}},components:{ElCollapseTransition:dt,ElCheckbox:Kt,NodeContent:{props:{node:{required:!0}},render:function(e){var t=this.$parent,n=t.tree,i=this.node,r=i.data,o=i.store;return t.renderContent?t.renderContent.call(t._renderProxy,e,{_self:n.$vnode.context,node:i,data:r,store:o}):n.$scopedSlots.default?n.$scopedSlots.default({node:i,data:r}):e("span",{class:"el-tree-node__label"},[i.label])}}},data:function(){return{tree:null,expanded:!1,childNodeRendered:!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){var t=this;this.$nextTick(function(){return t.expanded=e}),e&&(this.childNodeRendered=!0)}},methods:{getNodeKey:function(e){return ys(this.tree.nodeKey,e.data)},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.checkOnClickNode&&!this.node.disabled&&this.handleCheckChange(null,{target:{checked:!this.node.checked}}),this.tree.$emit("node-click",this.node.data,this.node,this)},handleContextMenu:function(e){this.tree._events["node-contextmenu"]&&this.tree._events["node-contextmenu"].length>0&&(e.stopPropagation(),e.preventDefault()),this.tree.$emit("node-contextmenu",e,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)))},handleCheckChange:function(e,t){var n=this;this.node.setChecked(t.target.checked,!this.tree.checkStrictly),this.$nextTick(function(){var e=n.tree.store;n.tree.$emit("check",n.node.data,{checkedNodes:e.getCheckedNodes(),checkedKeys:e.getCheckedKeys(),halfCheckedNodes:e.getHalfCheckedNodes(),halfCheckedKeys:e.getHalfCheckedKeys()})})},handleChildNodeExpand:function(e,t,n){this.broadcast("ElTreeNode","tree-node-expand",t),this.tree.$emit("node-expand",e,t,n)},handleDragStart:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-start",e,this)},handleDragOver:function(e){this.tree.draggable&&(this.tree.$emit("tree-node-drag-over",e,this),e.preventDefault())},handleDrop:function(e){e.preventDefault()},handleDragEnd:function(e){this.tree.draggable&&this.tree.$emit("tree-node-drag-end",e,this)}},created:function(){var e=this,t=this.$parent;t.isTree?this.tree=t:this.tree=t.tree;var n=this.tree;n||console.warn("Can not find node's tree.");var i=(n.props||{}).children||"children";this.$watch("node.data."+i,function(){e.node.updateChildren()}),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()})}},ks=Object(r.a)(Is,function(){var e=this,t=this,n=t.$createElement,i=t._self._c||n;return i("div",{directives:[{name:"show",rawName:"v-show",value:t.node.visible,expression:"node.visible"}],ref:"node",staticClass:"el-tree-node",class:{"is-expanded":t.expanded,"is-current":t.tree.store.currentNode===t.node,"is-hidden":!t.node.visible,"is-focusable":!t.node.disabled,"is-checked":!t.node.disabled&&t.node.checked},attrs:{role:"treeitem",tabindex:"-1","aria-expanded":t.expanded,"aria-disabled":t.node.disabled,"aria-checked":t.node.checked,draggable:t.tree.draggable},on:{click:function(e){return e.stopPropagation(),t.handleClick(e)},contextmenu:function(t){return e.handleContextMenu(t)},dragstart:function(e){return e.stopPropagation(),t.handleDragStart(e)},dragover:function(e){return e.stopPropagation(),t.handleDragOver(e)},dragend:function(e){return e.stopPropagation(),t.handleDragEnd(e)},drop:function(e){return e.stopPropagation(),t.handleDrop(e)}}},[i("div",{staticClass:"el-tree-node__content",style:{"padding-left":(t.node.level-1)*t.tree.indent+"px"}},[i("span",{class:[{"is-leaf":t.node.isLeaf,expanded:!t.node.isLeaf&&t.expanded},"el-tree-node__expand-icon",t.tree.iconClass?t.tree.iconClass:"el-icon-caret-right"],on:{click:function(e){return e.stopPropagation(),t.handleExpandIconClick(e)}}}),t.showCheckbox?i("el-checkbox",{attrs:{indeterminate:t.node.indeterminate,disabled:!!t.node.disabled},on:{change:t.handleCheckChange},nativeOn:{click:function(e){e.stopPropagation()}},model:{value:t.node.checked,callback:function(e){t.$set(t.node,"checked",e)},expression:"node.checked"}}):t._e(),t.node.loading?i("span",{staticClass:"el-tree-node__loading-icon el-icon-loading"}):t._e(),i("node-content",{attrs:{node:t.node}})],1),i("el-collapse-transition",[!t.renderAfterExpand||t.childNodeRendered?i("div",{directives:[{name:"show",rawName:"v-show",value:t.expanded,expression:"expanded"}],staticClass:"el-tree-node__children",attrs:{role:"group","aria-expanded":t.expanded}},t._l(t.node.childNodes,function(e){return i("el-tree-node",{key:t.getNodeKey(e),attrs:{"render-content":t.renderContent,"render-after-expand":t.renderAfterExpand,"show-checkbox":t.showCheckbox,node:e},on:{"node-expand":t.handleChildNodeExpand}})}),1):t._e()])],1)},[],!1,null,null,null);ks.options.__file="tree-node.vue";var js={name:"ElTree",mixins:[a],components:{ElTreeNode:ks.exports},data:function(){return{store:null,root:null,currentNode:null,treeItems:null,checkboxItems:[],dragState:{showDropIndicator:!1,draggingNode:null,dropNode:null,allowDrop:!0}}},props:{data:{type:Array},emptyText:{type:String,default:function(){return Object(u.b)("el.tree.emptyText")}},renderAfterExpand:{type:Boolean,default:!0},nodeKey:String,checkStrictly:Boolean,defaultExpandAll:Boolean,expandOnClickNode:{type:Boolean,default:!0},checkOnClickNode:Boolean,checkDescendants:{type:Boolean,default:!1},autoExpandParent:{type:Boolean,default:!0},defaultCheckedKeys:Array,defaultExpandedKeys:Array,currentNodeKey:[String,Number],renderContent:Function,showCheckbox:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},allowDrag:Function,allowDrop:Function,props:{default:function(){return{children:"children",label:"label",disabled:"disabled"}}},lazy:{type:Boolean,default:!1},highlightCurrent:Boolean,load:Function,filterNodeMethod:Function,accordion:Boolean,indent:{type:Number,default:18},iconClass:String},computed:{children:{set:function(e){this.data=e},get:function(){return this.data}},treeItemArray:function(){return Array.prototype.slice.call(this.treeItems)},isEmpty:function(){var e=this.root.childNodes;return!e||0===e.length||e.every(function(e){return!e.visible})}},watch:{defaultCheckedKeys:function(e){this.store.setDefaultCheckedKey(e)},defaultExpandedKeys:function(e){this.store.defaultExpandedKeys=e,this.store.setDefaultExpandedKeys(e)},data:function(e){this.store.setData(e)},checkboxItems:function(e){Array.prototype.forEach.call(e,function(e){e.setAttribute("tabindex",-1)})},checkStrictly:function(e){this.store.checkStrictly=e}},methods:{filter:function(e){if(!this.filterNodeMethod)throw new Error("[Tree] filterNodeMethod is required when filter");this.store.filter(e)},getNodeKey:function(e){return ys(this.nodeKey,e.data)},getNodePath:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getNodePath");var t=this.store.getNode(e);if(!t)return[];for(var n=[t.data],i=t.parent;i&&i!==this.root;)n.push(i.data),i=i.parent;return n.reverse()},getCheckedNodes:function(e,t){return this.store.getCheckedNodes(e,t)},getCheckedKeys:function(e){return this.store.getCheckedKeys(e)},getCurrentNode:function(){var e=this.store.getCurrentNode();return e?e.data:null},getCurrentKey:function(){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getCurrentKey");var e=this.getCurrentNode();return e?e[this.nodeKey]:null},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 setCheckedKeys");this.store.setCheckedKeys(e,t)},setChecked:function(e,t,n){this.store.setChecked(e,t,n)},getHalfCheckedNodes:function(){return this.store.getHalfCheckedNodes()},getHalfCheckedKeys:function(){return this.store.getHalfCheckedKeys()},setCurrentNode:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentNode");this.store.setUserCurrentNode(e)},setCurrentKey:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentKey");this.store.setCurrentNodeKey(e)},getNode:function(e){return this.store.getNode(e)},remove:function(e){this.store.remove(e)},append:function(e,t){this.store.append(e,t)},insertBefore:function(e,t){this.store.insertBefore(e,t)},insertAfter:function(e,t){this.store.insertAfter(e,t)},handleNodeExpand:function(e,t,n){this.broadcast("ElTreeNode","tree-node-expand",t),this.$emit("node-expand",e,t,n)},updateKeyChildren:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in updateKeyChild");this.store.updateChildren(e,t)},initTabIndex:function(){this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]");var e=this.$el.querySelectorAll(".is-checked[role=treeitem]");e.length?e[0].setAttribute("tabindex",0):this.treeItems[0]&&this.treeItems[0].setAttribute("tabindex",0)},handleKeydown:function(e){var t=e.target;if(-1!==t.className.indexOf("el-tree-node")){var n=e.keyCode;this.treeItems=this.$el.querySelectorAll(".is-focusable[role=treeitem]");var i=this.treeItemArray.indexOf(t),r=void 0;[38,40].indexOf(n)>-1&&(e.preventDefault(),r=38===n?0!==i?i-1:0:i-1&&(e.preventDefault(),t.click());var o=t.querySelector('[type="checkbox"]');[13,32].indexOf(n)>-1&&o&&(e.preventDefault(),o.click())}}},created:function(){var e=this;this.isTree=!0,this.store=new _s({key:this.nodeKey,data:this.data,lazy:this.lazy,props:this.props,load:this.load,currentNodeKey:this.currentNodeKey,checkStrictly:this.checkStrictly,checkDescendants:this.checkDescendants,defaultCheckedKeys:this.defaultCheckedKeys,defaultExpandedKeys:this.defaultExpandedKeys,autoExpandParent:this.autoExpandParent,defaultExpandAll:this.defaultExpandAll,filterNodeMethod:this.filterNodeMethod}),this.root=this.store.root;var t=this.dragState;this.$on("tree-node-drag-start",function(n,i){if("function"==typeof e.allowDrag&&!e.allowDrag(i.node))return n.preventDefault(),!1;n.dataTransfer.effectAllowed="move";try{n.dataTransfer.setData("text/plain","")}catch(e){}t.draggingNode=i,e.$emit("node-drag-start",i.node,n)}),this.$on("tree-node-drag-over",function(n,i){var r=function(e,t){for(var n=e;n&&"BODY"!==n.tagName;){if(n.__vue__&&n.__vue__.$options.name===t)return n.__vue__;n=n.parentNode}return null}(n.target,"ElTreeNode"),o=t.dropNode;o&&o!==r&&Object(C.g)(o.$el,"is-drop-inner");var s=t.draggingNode;if(s&&r){var a=!0,l=!0,u=!0,c=!0;"function"==typeof e.allowDrop&&(a=e.allowDrop(s.node,r.node,"prev"),c=l=e.allowDrop(s.node,r.node,"inner"),u=e.allowDrop(s.node,r.node,"next")),n.dataTransfer.dropEffect=l?"move":"none",(a||l||u)&&o!==r&&(o&&e.$emit("node-drag-leave",s.node,o.node,n),e.$emit("node-drag-enter",s.node,r.node,n)),(a||l||u)&&(t.dropNode=r),r.node.nextSibling===s.node&&(u=!1),r.node.previousSibling===s.node&&(a=!1),r.node.contains(s.node,!1)&&(l=!1),(s.node===r.node||s.node.contains(r.node))&&(a=!1,l=!1,u=!1);var h=r.$el.getBoundingClientRect(),d=e.$el.getBoundingClientRect(),p=void 0,f=a?l?.25:u?.45:1:-1,m=u?l?.75:a?.55:0:1,g=-9999,v=n.clientY-h.top;p=vh.height*m?"after":l?"inner":"none";var y=r.$el.querySelector(".el-tree-node__expand-icon").getBoundingClientRect(),b=e.$refs.dropIndicator;"before"===p?g=y.top-d.top:"after"===p&&(g=y.bottom-d.top),b.style.top=g+"px",b.style.left=y.right-d.left+"px","inner"===p?Object(C.a)(r.$el,"is-drop-inner"):Object(C.g)(r.$el,"is-drop-inner"),t.showDropIndicator="before"===p||"after"===p,t.allowDrop=t.showDropIndicator||c,t.dropType=p,e.$emit("node-drag-over",s.node,r.node,n)}}),this.$on("tree-node-drag-end",function(n){var i=t.draggingNode,r=t.dropType,o=t.dropNode;if(n.preventDefault(),n.dataTransfer.dropEffect="move",i&&o){var s={data:i.node.data};"none"!==r&&i.node.remove(),"before"===r?o.node.parent.insertBefore(s,o.node):"after"===r?o.node.parent.insertAfter(s,o.node):"inner"===r&&o.node.insertChild(s),"none"!==r&&e.store.registerNode(s),Object(C.g)(o.$el,"is-drop-inner"),e.$emit("node-drag-end",i.node,o.node,r,n),"none"!==r&&e.$emit("node-drop",i.node,o.node,r,n)}i&&!o&&e.$emit("node-drag-end",i.node,null,r,n),t.showDropIndicator=!1,t.draggingNode=null,t.dropNode=null,t.allowDrop=!0})},mounted:function(){this.initTabIndex(),this.$el.addEventListener("keydown",this.handleKeydown)},updated:function(){this.treeItems=this.$el.querySelectorAll("[role=treeitem]"),this.checkboxItems=this.$el.querySelectorAll("input[type=checkbox]")}},Ts=Object(r.a)(js,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-tree",class:{"el-tree--highlight-current":e.highlightCurrent,"is-dragging":!!e.dragState.draggingNode,"is-drop-not-allow":!e.dragState.allowDrop,"is-drop-inner":"inner"===e.dragState.dropType},attrs:{role:"tree"}},[e._l(e.root.childNodes,function(t){return n("el-tree-node",{key:e.getNodeKey(t),attrs:{node:t,props:e.props,"render-after-expand":e.renderAfterExpand,"show-checkbox":e.showCheckbox,"render-content":e.renderContent},on:{"node-expand":e.handleNodeExpand}})}),e.isEmpty?n("div",{staticClass:"el-tree__empty-block"},[n("span",{staticClass:"el-tree__empty-text"},[e._v(e._s(e.emptyText))])]):e._e(),n("div",{directives:[{name:"show",rawName:"v-show",value:e.dragState.showDropIndicator,expression:"dragState.showDropIndicator"}],ref:"dropIndicator",staticClass:"el-tree__drop-indicator"})],2)},[],!1,null,null,null);Ts.options.__file="tree.vue";var Ss=Ts.exports;Ss.install=function(e){e.component(Ss.name,Ss)};var Ls=Ss,Os={success:"el-icon-success",warning:"el-icon-warning",error:"el-icon-error"},As={name:"ElAlert",props:{title:{type:String,default:""},description:{type:String,default:""},type:{type:String,default:"info"},closable:{type:Boolean,default:!0},closeText:{type:String,default:""},showIcon:Boolean,center:Boolean},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 Os[this.type]||"el-icon-info"},isBigIcon:function(){return this.description||this.$slots.default?"is-big":""},isBoldTitle:function(){return this.description||this.$slots.default?"is-bold":""}}},Es=Object(r.a)(As,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-alert-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-alert",class:[e.typeClass,e.center?"is-center":""],attrs:{role:"alert"}},[e.showIcon?n("i",{staticClass:"el-alert__icon",class:[e.iconClass,e.isBigIcon]}):e._e(),n("div",{staticClass:"el-alert__content"},[e.title||e.$slots.title?n("span",{staticClass:"el-alert__title",class:[e.isBoldTitle]},[e._t("title",[e._v(e._s(e.title))])],2):e._e(),e._t("default",[e.description?n("p",{staticClass:"el-alert__description"},[e._v(e._s(e.description))]):e._e()]),n("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)])])},[],!1,null,null,null);Es.options.__file="main.vue";var zs=Es.exports;zs.install=function(e){e.component(zs.name,zs)};var $s=zs,Ps={success:"success",info:"info",warning:"warning",error:"error"},Fs={data:function(){return{visible:!1,title:"",message:"",duration:4500,type:"",showClose:!0,customClass:"",iconClass:"",onClose:null,onClick:null,closed:!1,verticalOffset:0,timer:null,dangerouslyUseHTMLString:!1,position:"top-right"}},computed:{typeClass:function(){return this.type&&Ps[this.type]?"el-icon-"+Ps[this.type]:""},horizontalClass:function(){return this.position.indexOf("right")>-1?"right":"left"},verticalProperty:function(){return/^top-/.test(this.position)?"top":"bottom"},positionStyle:function(){var e;return(e={})[this.verticalProperty]=this.verticalOffset+"px",e}},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))},keydown:function(e){46===e.keyCode||8===e.keyCode?this.clearTimer():27===e.keyCode?this.closed||this.close():this.startTimer()}},mounted:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration)),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},Us=Object(r.a)(Fs,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-notification-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],class:["el-notification",e.customClass,e.horizontalClass],style:e.positionStyle,attrs:{role:"alert"},on:{mouseenter:function(t){e.clearTimer()},mouseleave:function(t){e.startTimer()},click:e.click}},[e.type||e.iconClass?n("i",{staticClass:"el-notification__icon",class:[e.typeClass,e.iconClass]}):e._e(),n("div",{staticClass:"el-notification__group",class:{"is-with-icon":e.typeClass||e.iconClass}},[n("h2",{staticClass:"el-notification__title",domProps:{textContent:e._s(e.title)}}),n("div",{directives:[{name:"show",rawName:"v-show",value:e.message,expression:"message"}],staticClass:"el-notification__content"},[e._t("default",[e.dangerouslyUseHTMLString?n("p",{domProps:{innerHTML:e._s(e.message)}}):n("p",[e._v(e._s(e.message))])])],2),e.showClose?n("div",{staticClass:"el-notification__closeBtn el-icon-close",on:{click:function(t){return t.stopPropagation(),e.close(t)}}}):e._e()])])])},[],!1,null,null,null);Us.options.__file="main.vue";var Ys=Us.exports,Rs=w.a.extend(Ys),Bs=void 0,Qs=[],Vs=1,Hs=function e(t){if(!w.a.prototype.$isServer){var n=(t=t||{}).onClose,i="notification_"+Vs++,r=t.position||"top-right";t.onClose=function(){e.close(i,n)},Bs=new Rs({data:t}),bt(t.message)&&(Bs.$slots.default=[t.message],t.message="REPLACED_BY_VNODE"),Bs.id=i,Bs.$mount(),document.body.appendChild(Bs.$el),Bs.visible=!0,Bs.dom=Bs.$el,Bs.dom.style.zIndex=j.nextZIndex();var o=t.offset||0;return Qs.filter(function(e){return e.position===r}).forEach(function(e){o+=e.$el.offsetHeight+16}),o+=16,Bs.verticalOffset=o,Qs.push(Bs),Bs}};["success","warning","info","error"].forEach(function(e){Hs[e]=function(t){return("string"==typeof t||bt(t))&&(t={message:t}),t.type=e,Hs(t)}}),Hs.close=function(e,t){var n=-1,i=Qs.length,r=Qs.filter(function(t,i){return t.id===e&&(n=i,!0)})[0];if(r&&("function"==typeof t&&t(r),Qs.splice(n,1),!(i<=1)))for(var o=r.position,s=r.dom.offsetHeight,a=n;a=0;e--)Qs[e].close()};var Ws=Hs,Gs={name:"ElSliderButton",components:{ElTooltip:wt},props:{value:{type:Number,default:0},vertical:{type:Boolean,default:!1},tooltipClass:String},data:function(){return{hovering:!1,dragging:!1,isClick:!1,startX:0,currentX:0,startY:0,currentY:0,startPosition:0,newPosition:null,oldValue:this.value}},computed:{disabled:function(){return this.$parent.sliderDisabled},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("touchmove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("touchend",this.onDragEnd),window.addEventListener("contextmenu",this.onDragEnd))},onLeftKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)-this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onRightKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)+this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onDragStart:function(e){this.dragging=!0,this.isClick=!0,"touchstart"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),this.vertical?this.startY=e.clientY:this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition),this.newPosition=this.startPosition},onDragging:function(e){if(this.dragging){this.isClick=!1,this.displayTooltip(),this.$parent.resetSize();var t=0;"touchmove"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),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.isClick||(e.setPosition(e.newPosition),e.$parent.emitChange())},0),window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("touchmove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("touchend",this.onDragEnd),window.removeEventListener("contextmenu",this.onDragEnd))},setPosition:function(e){var t=this;if(null!==e&&!isNaN(e)){e<0?e=0:e>100&&(e=100);var n=100/((this.max-this.min)/this.step),i=Math.round(e/n)*n*(this.max-this.min)*.01+this.min;i=parseFloat(i.toFixed(this.precision)),this.$emit("input",i),this.$nextTick(function(){t.$refs.tooltip&&t.$refs.tooltip.updatePopper()}),this.dragging||this.value===this.oldValue||(this.oldValue=this.value)}}}},qs=Object(r.a)(Gs,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"button",staticClass:"el-slider__button-wrapper",class:{hover:e.hovering,dragging:e.dragging},style:e.wrapperStyle,attrs:{tabindex:"0"},on:{mouseenter:e.handleMouseEnter,mouseleave:e.handleMouseLeave,mousedown:e.onButtonDown,touchstart:e.onButtonDown,focus:e.handleMouseEnter,blur:e.handleMouseLeave,keydown:[function(t){return"button"in t||!e._k(t.keyCode,"left",37,t.key,["Left","ArrowLeft"])?"button"in t&&0!==t.button?null:e.onLeftKeyDown(t):null},function(t){return"button"in t||!e._k(t.keyCode,"right",39,t.key,["Right","ArrowRight"])?"button"in t&&2!==t.button?null:e.onRightKeyDown(t):null},function(t){return"button"in t||!e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?(t.preventDefault(),e.onLeftKeyDown(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?(t.preventDefault(),e.onRightKeyDown(t)):null}]}},[n("el-tooltip",{ref:"tooltip",attrs:{placement:"top","popper-class":e.tooltipClass,disabled:!e.showTooltip}},[n("span",{attrs:{slot:"content"},slot:"content"},[e._v(e._s(e.formatValue))]),n("div",{staticClass:"el-slider__button",class:{hover:e.hovering,dragging:e.dragging}})])],1)},[],!1,null,null,null);qs.options.__file="button.vue";var Zs=qs.exports,Ks={name:"ElSlider",mixins:[a],inject:{elForm:{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},inputSize:{type:String,default:"small"},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},debounce:{type:Number,default:300},label:{type:String},tooltipClass:String},components:{ElInputNumber:At,SliderButton:Zs},data:function(){return{firstValue:null,secondValue:null,oldValue:null,dragging:!1,sliderSize:1}},watch:{value:function(e,t){this.dragging||Array.isArray(e)&&Array.isArray(t)&&e.every(function(e,n){return e===t[n]})||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,n){return t===e.oldValue[n]}):this.value!==this.oldValue},setValues:function(){if(this.min>this.max)console.error("[Element Error][Slider]min should not be greater than max.");else{var e=this.value;this.range&&Array.isArray(e)?e[1]this.max?this.$emit("input",[this.max,this.max]):e[0]this.max?this.$emit("input",[e[0],this.max]):(this.firstValue=e[0],this.secondValue=e[1],this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",[this.minValue,this.maxValue]),this.oldValue=e.slice())):this.range||"number"!=typeof e||isNaN(e)||(ethis.max?this.$emit("input",this.max):(this.firstValue=e,this.valueChanged()&&(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){var n=void 0;n=Math.abs(this.minValue-t)this.secondValue?"button1":"button2",this.$refs[n].setPosition(e)}else this.$refs.button1.setPosition(e)},onSliderClick:function(e){if(!this.sliderDisabled&&!this.dragging){if(this.resetSize(),this.vertical){var t=this.$refs.slider.getBoundingClientRect().bottom;this.setPosition((t-e.clientY)/this.sliderSize*100)}else{var n=this.$refs.slider.getBoundingClientRect().left;this.setPosition((e.clientX-n)/this.sliderSize*100)}this.emitChange()}},resetSize:function(){this.$refs.slider&&(this.sliderSize=this.$refs.slider["client"+(this.vertical?"Height":"Width")])},emitChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.range?[e.minValue,e.maxValue]:e.value)})}},computed:{stops:function(){var e=this;if(!this.showStops||this.min>this.max)return[];if(0===this.step)return[];for(var t=(this.max-this.min)/this.step,n=100*this.step/(this.max-this.min),i=[],r=1;r100*(e.maxValue-e.min)/(e.max-e.min)}):i.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}},sliderDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},mounted:function(){var e=void 0;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],e=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,e=this.firstValue),this.$el.setAttribute("aria-valuetext",e),this.$el.setAttribute("aria-label",this.label?this.label:"slider between "+this.min+" and "+this.max),this.resetSize(),window.addEventListener("resize",this.resetSize)},beforeDestroy:function(){window.removeEventListener("resize",this.resetSize)}},Js=Object(r.a)(Ks,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-slider",class:{"is-vertical":e.vertical,"el-slider--with-input":e.showInput},attrs:{role:"slider","aria-valuemin":e.min,"aria-valuemax":e.max,"aria-orientation":e.vertical?"vertical":"horizontal","aria-disabled":e.sliderDisabled}},[e.showInput&&!e.range?n("el-input-number",{ref:"input",staticClass:"el-slider__input",attrs:{step:e.step,disabled:e.sliderDisabled,controls:e.showInputControls,min:e.min,max:e.max,debounce:e.debounce,size:e.inputSize},on:{change:function(t){e.$nextTick(e.emitChange)}},model:{value:e.firstValue,callback:function(t){e.firstValue=t},expression:"firstValue"}}):e._e(),n("div",{ref:"slider",staticClass:"el-slider__runway",class:{"show-input":e.showInput,disabled:e.sliderDisabled},style:e.runwayStyle,on:{click:e.onSliderClick}},[n("div",{staticClass:"el-slider__bar",style:e.barStyle}),n("slider-button",{ref:"button1",attrs:{vertical:e.vertical,"tooltip-class":e.tooltipClass},model:{value:e.firstValue,callback:function(t){e.firstValue=t},expression:"firstValue"}}),e.range?n("slider-button",{ref:"button2",attrs:{vertical:e.vertical,"tooltip-class":e.tooltipClass},model:{value:e.secondValue,callback:function(t){e.secondValue=t},expression:"secondValue"}}):e._e(),e._l(e.stops,function(t,i){return e.showStops?n("div",{key:i,staticClass:"el-slider__stop",style:e.vertical?{bottom:t+"%"}:{left:t+"%"}}):e._e()})],2)],1)},[],!1,null,null,null);Js.options.__file="main.vue";var Xs=Js.exports;Xs.install=function(e){e.component(Xs.name,Xs)};var ea=Xs,ta={data:function(){return{text:null,spinner:null,background:null,fullscreen:!0,visible:!1,customClass:""}},methods:{handleAfterLeave:function(){this.$emit("after-leave")},setText:function(e){this.text=e}}},na=Object(r.a)(ta,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-loading-fade"},on:{"after-leave":e.handleAfterLeave}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-loading-mask",class:[e.customClass,{"is-fullscreen":e.fullscreen}],style:{backgroundColor:e.background||""}},[n("div",{staticClass:"el-loading-spinner"},[e.spinner?n("i",{class:e.spinner}):n("svg",{staticClass:"circular",attrs:{viewBox:"25 25 50 50"}},[n("circle",{staticClass:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})]),e.text?n("p",{staticClass:"el-loading-text"},[e._v(e._s(e.text))]):e._e()])])])},[],!1,null,null,null);na.options.__file="loading.vue";var ia=na.exports,ra=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:300,i=arguments.length>3&&void 0!==arguments[3]&&arguments[3];if(!e||!t)throw new Error("instance & callback is required");var r=!1,o=function(){r||(r=!0,t&&t.apply(null,arguments))};i?e.$once("after-leave",o):e.$on("after-leave",o),setTimeout(function(){o()},n+100)},oa=w.a.extend(ia),sa={install:function(e){if(!e.prototype.$isServer){var t=function(t,i){i.value?e.nextTick(function(){i.modifiers.fullscreen?(t.originalPosition=Object(C.b)(document.body,"position"),t.originalOverflow=Object(C.b)(document.body,"overflow"),t.maskStyle.zIndex=j.nextZIndex(),Object(C.a)(t.mask,"is-fullscreen"),n(document.body,t,i)):(Object(C.g)(t.mask,"is-fullscreen"),i.modifiers.body?(t.originalPosition=Object(C.b)(document.body,"position"),["top","left"].forEach(function(e){var n="top"===e?"scrollTop":"scrollLeft";t.maskStyle[e]=t.getBoundingClientRect()[e]+document.body[n]+document.documentElement[n]-parseInt(Object(C.b)(document.body,"margin-"+e),10)+"px"}),["height","width"].forEach(function(e){t.maskStyle[e]=t.getBoundingClientRect()[e]+"px"}),n(document.body,t,i)):(t.originalPosition=Object(C.b)(t,"position"),n(t,t,i)))}):(ra(t.instance,function(e){t.domVisible=!1;var n=i.modifiers.fullscreen||i.modifiers.body?document.body:t;Object(C.g)(n,"el-loading-parent--relative"),Object(C.g)(n,"el-loading-parent--hidden"),t.instance.hiding=!1},300,!0),t.instance.visible=!1,t.instance.hiding=!0)},n=function(t,n,i){n.domVisible||"none"===Object(C.b)(n,"display")||"hidden"===Object(C.b)(n,"visibility")||(Object.keys(n.maskStyle).forEach(function(e){n.mask.style[e]=n.maskStyle[e]}),"absolute"!==n.originalPosition&&"fixed"!==n.originalPosition&&Object(C.a)(t,"el-loading-parent--relative"),i.modifiers.fullscreen&&i.modifiers.lock&&Object(C.a)(t,"el-loading-parent--hidden"),n.domVisible=!0,t.appendChild(n.mask),e.nextTick(function(){n.instance.hiding?n.instance.$emit("after-leave"):n.instance.visible=!0}),n.domInserted=!0)};e.directive("loading",{bind:function(e,n,i){var r=e.getAttribute("element-loading-text"),o=e.getAttribute("element-loading-spinner"),s=e.getAttribute("element-loading-background"),a=e.getAttribute("element-loading-custom-class"),l=i.context,u=new oa({el:document.createElement("div"),data:{text:l&&l[r]||r,spinner:l&&l[o]||o,background:l&&l[s]||s,customClass:l&&l[a]||a,fullscreen:!!n.modifiers.fullscreen}});e.instance=u,e.mask=u.$el,e.maskStyle={},n.value&&t(e,n)},update:function(e,n){e.instance.setText(e.getAttribute("element-loading-text")),n.oldValue!==n.value&&t(e,n)},unbind:function(e,n){e.domInserted&&(e.mask&&e.mask.parentNode&&e.mask.parentNode.removeChild(e.mask),t(e,{value:!1,modifiers:n.modifiers})),e.instance&&e.instance.$destroy()}})}}},aa=sa,la=w.a.extend(ia),ua={text:null,fullscreen:!0,body:!1,lock:!1,customClass:""},ca=void 0;la.prototype.originalPosition="",la.prototype.originalOverflow="",la.prototype.close=function(){var e=this;this.fullscreen&&(ca=void 0),ra(this,function(t){var n=e.fullscreen||e.body?document.body:e.target;Object(C.g)(n,"el-loading-parent--relative"),Object(C.g)(n,"el-loading-parent--hidden"),e.$el&&e.$el.parentNode&&e.$el.parentNode.removeChild(e.$el),e.$destroy()},300),this.visible=!1};var ha=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!w.a.prototype.$isServer){if("string"==typeof(e=g({},ua,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&&ca)return ca;var t=e.body?document.body:e.target,n=new la({el:document.createElement("div"),data:e});return function(e,t,n){var i={};e.fullscreen?(n.originalPosition=Object(C.b)(document.body,"position"),n.originalOverflow=Object(C.b)(document.body,"overflow"),i.zIndex=j.nextZIndex()):e.body?(n.originalPosition=Object(C.b)(document.body,"position"),["top","left"].forEach(function(t){var n="top"===t?"scrollTop":"scrollLeft";i[t]=e.target.getBoundingClientRect()[t]+document.body[n]+document.documentElement[n]+"px"}),["height","width"].forEach(function(t){i[t]=e.target.getBoundingClientRect()[t]+"px"})):n.originalPosition=Object(C.b)(t,"position"),Object.keys(i).forEach(function(e){n.$el.style[e]=i[e]})}(e,t,n),"absolute"!==n.originalPosition&&"fixed"!==n.originalPosition&&Object(C.a)(t,"el-loading-parent--relative"),e.fullscreen&&e.lock&&Object(C.a)(t,"el-loading-parent--hidden"),t.appendChild(n.$el),w.a.nextTick(function(){n.visible=!0}),e.fullscreen&&(ca=n),n}},da={install:function(e){e.use(aa),e.prototype.$loading=ha},directive:aa,service:ha},pa={name:"ElIcon",props:{name:String}},fa=Object(r.a)(pa,function(){var e=this.$createElement;return(this._self._c||e)("i",{class:"el-icon-"+this.name})},[],!1,null,null,null);fa.options.__file="icon.vue";var ma=fa.exports;ma.install=function(e){e.component(ma.name,ma)};var ga=ma,va={name:"ElRow",componentName:"ElRow",props:{tag:{type:String,default:"div"},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}},render:function(e){return e(this.tag,{class:["el-row","start"!==this.justify?"is-justify-"+this.justify:"","top"!==this.align?"is-align-"+this.align:"",{"el-row--flex":"flex"===this.type}],style:this.style},this.$slots.default)},install:function(e){e.component(va.name,va)}},ya=va,ba="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},Ma={name:"ElCol",props:{span:{type:Number,default:24},tag:{type:String,default:"div"},offset:Number,pull:Number,push:Number,xs:[Number,Object],sm:[Number,Object],md:[Number,Object],lg:[Number,Object],xl:[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=[],i={};return this.gutter&&(i.paddingLeft=this.gutter/2+"px",i.paddingRight=i.paddingLeft),["span","offset","pull","push"].forEach(function(e){(t[e]||0===t[e])&&n.push("span"!==e?"el-col-"+e+"-"+t[e]:"el-col-"+t[e])}),["xs","sm","md","lg","xl"].forEach(function(e){if("number"==typeof t[e])n.push("el-col-"+e+"-"+t[e]);else if("object"===ba(t[e])){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(this.tag,{class:["el-col",n],style:i},this.$slots.default)},install:function(e){e.component(Ma.name,Ma)}},wa=Ma,Ca={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,validator:function(e){return["text","success","exception"].indexOf(e)>-1}},strokeWidth:{type:Number,default:6},textInside:{type:Boolean,default:!1},width:{type:Number,default:126},showText:{type:Boolean,default:!0},color:{type:String,default:""}},computed:{barStyle:function(){var e={};return e.width=this.percentage+"%",e.backgroundColor=this.color,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=void 0;if(this.color)e=this.color;else 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-close":"success"===this.status?"el-icon-check":"el-icon-close"},progressTextSize:function(){return"line"===this.type?12+.4*this.strokeWidth:.111111*this.width+2}}},xa=Object(r.a)(Ca,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("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}],attrs:{role:"progressbar","aria-valuenow":e.percentage,"aria-valuemin":"0","aria-valuemax":"100"}},["line"===e.type?n("div",{staticClass:"el-progress-bar"},[n("div",{staticClass:"el-progress-bar__outer",style:{height:e.strokeWidth+"px"}},[n("div",{staticClass:"el-progress-bar__inner",style:e.barStyle},[e.showText&&e.textInside?n("div",{staticClass:"el-progress-bar__innerText"},[e._v(e._s(e.percentage)+"%")]):e._e()])])]):n("div",{staticClass:"el-progress-circle",style:{height:e.width+"px",width:e.width+"px"}},[n("svg",{attrs:{viewBox:"0 0 100 100"}},[n("path",{staticClass:"el-progress-circle__track",attrs:{d:e.trackPath,stroke:"#e5e9f2","stroke-width":e.relativeStrokeWidth,fill:"none"}}),n("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?n("div",{staticClass:"el-progress__text",style:{fontSize:e.progressTextSize+"px"}},[e.status?["text"===e.status?e._t("default"):n("i",{class:e.iconClass})]:[e._v(e._s(e.percentage)+"%")]],2):e._e()])},[],!1,null,null,null);xa.options.__file="progress.vue";var Na=xa.exports;Na.install=function(e){e.component(Na.name,Na)};var Da=Na,_a={name:"ElUploadList",mixins:[c],data:function(){return{focusing:!1}},components:{ElProgress:Da},props:{files:{type:Array,default:function(){return[]}},disabled:{type:Boolean,default:!1},handlePreview:Function,listType:String},methods:{parsePercentage:function(e){return parseInt(e,10)},handleClick:function(e){this.handlePreview&&this.handlePreview(e)}}},Ia=Object(r.a)(_a,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition-group",{class:["el-upload-list","el-upload-list--"+e.listType,{"is-disabled":e.disabled}],attrs:{tag:"ul",name:"el-list"}},e._l(e.files,function(t){return n("li",{key:t.uid,class:["el-upload-list__item","is-"+t.status,e.focusing?"focusing":""],attrs:{tabindex:"0"},on:{keydown:function(n){if(!("button"in n)&&e._k(n.keyCode,"delete",[8,46],n.key,["Backspace","Delete","Del"]))return null;!e.disabled&&e.$emit("remove",t)},focus:function(t){e.focusing=!0},blur:function(t){e.focusing=!1},click:function(t){e.focusing=!1}}},["uploading"!==t.status&&["picture-card","picture"].indexOf(e.listType)>-1?n("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}):e._e(),n("a",{staticClass:"el-upload-list__item-name",on:{click:function(n){e.handleClick(t)}}},[n("i",{staticClass:"el-icon-document"}),e._v(e._s(t.name)+"\n ")]),n("label",{staticClass:"el-upload-list__item-status-label"},[n("i",{class:{"el-icon-upload-success":!0,"el-icon-circle-check":"text"===e.listType,"el-icon-check":["picture-card","picture"].indexOf(e.listType)>-1}})]),e.disabled?e._e():n("i",{staticClass:"el-icon-close",on:{click:function(n){e.$emit("remove",t)}}}),e.disabled?e._e():n("i",{staticClass:"el-icon-close-tip"},[e._v(e._s(e.t("el.upload.deleteTip")))]),"uploading"===t.status?n("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(),"picture-card"===e.listType?n("span",{staticClass:"el-upload-list__item-actions"},[e.handlePreview&&"picture-card"===e.listType?n("span",{staticClass:"el-upload-list__item-preview",on:{click:function(n){e.handlePreview(t)}}},[n("i",{staticClass:"el-icon-zoom-in"})]):e._e(),e.disabled?e._e():n("span",{staticClass:"el-upload-list__item-delete",on:{click:function(n){e.$emit("remove",t)}}},[n("i",{staticClass:"el-icon-delete"})])]):e._e()],1)}),0)},[],!1,null,null,null);Ia.options.__file="upload-list.vue";var ka=Ia.exports,ja=n(22),Ta=n.n(ja);var Sa={name:"ElUploadDrag",props:{disabled:Boolean},inject:{uploader:{default:""}},data:function(){return{dragover:!1}},methods:{onDragover:function(){this.disabled||(this.dragover=!0)},onDrop:function(e){if(!this.disabled&&this.uploader){var t=this.uploader.accept;this.dragover=!1,t?this.$emit("file",[].slice.call(e.dataTransfer.files).filter(function(e){var n=e.type,i=e.name,r=i.indexOf(".")>-1?"."+i.split(".").pop():"",o=n.replace(/\/.*$/,"");return t.split(",").map(function(e){return e.trim()}).filter(function(e){return e}).some(function(e){return/\..+$/.test(e)?r===e:/\/\*$/.test(e)?o===e.replace(/\/\*$/,""):!!/^[^\/]+\/[^\/]+$/.test(e)&&n===e})})):this.$emit("file",e.dataTransfer.files)}}}},La=Object(r.a)(Sa,function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"el-upload-dragger",class:{"is-dragover":e.dragover},on:{drop:function(t){return t.preventDefault(),e.onDrop(t)},dragover:function(t){return t.preventDefault(),e.onDragover(t)},dragleave:function(t){t.preventDefault(),e.dragover=!1}}},[e._t("default")],2)},[],!1,null,null,null);La.options.__file="upload-dragger.vue";var Oa={inject:["uploader"],components:{UploadDragger:La.exports},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:function(e){if("undefined"!=typeof XMLHttpRequest){var t=new XMLHttpRequest,n=e.action;t.upload&&(t.upload.onprogress=function(t){t.total>0&&(t.percent=t.loaded/t.total*100),e.onProgress(t)});var i=new FormData;e.data&&Object.keys(e.data).forEach(function(t){i.append(t,e.data[t])}),i.append(e.filename,e.file,e.file.name),t.onerror=function(t){e.onError(t)},t.onload=function(){if(t.status<200||t.status>=300)return e.onError(function(e,t,n){var i=void 0;i=n.response?""+(n.response.error||n.response):n.responseText?""+n.responseText:"fail to post "+e+" "+n.status;var r=new Error(i);return r.status=n.status,r.method="post",r.url=e,r}(n,0,t));e.onSuccess(function(e){var t=e.responseText||e.response;if(!t)return t;try{return JSON.parse(t)}catch(e){return t}}(t))},t.open("post",n,!0),e.withCredentials&&"withCredentials"in t&&(t.withCredentials=!0);var r=e.headers||{};for(var o in r)r.hasOwnProperty(o)&&null!==r[o]&&t.setRequestHeader(o,r[o]);return t.send(i),t}}},disabled:Boolean,limit:Number,onExceed:Function},data:function(){return{mouseover:!1,reqs:{}}},methods:{isImage:function(e){return-1!==e.indexOf("image")},handleChange:function(e){var t=e.target.files;t&&this.uploadFiles(t)},uploadFiles:function(e){var t=this;if(this.limit&&this.fileList.length+e.length>this.limit)this.onExceed&&this.onExceed(e,this.fileList);else{var n=Array.prototype.slice.call(e);this.multiple||(n=n.slice(0,1)),0!==n.length&&n.forEach(function(e){t.onStart(e),t.autoUpload&&t.upload(e)})}},upload:function(e){var t=this;if(this.$refs.input.value=null,!this.beforeUpload)return this.post(e);var n=this.beforeUpload(e);n&&n.then?n.then(function(n){var i=Object.prototype.toString.call(n);if("[object File]"===i||"[object Blob]"===i){for(var r in"[object Blob]"===i&&(n=new File([n],e.name,{type:e.type})),e)e.hasOwnProperty(r)&&(n[r]=e[r]);t.post(n)}else t.post(e)},function(){t.onRemove(null,e)}):!1!==n?this.post(e):this.onRemove(null,e)},abort:function(e){var t=this.reqs;if(e){var n=e;e.uid&&(n=e.uid),t[n]&&t[n].abort()}else Object.keys(t).forEach(function(e){t[e]&&t[e].abort(),delete t[e]})},post:function(e){var t=this,n=e.uid,i={headers:this.headers,withCredentials:this.withCredentials,file:e,data:this.data,filename:this.name,action:this.action,onProgress:function(n){t.onProgress(n,e)},onSuccess:function(i){t.onSuccess(i,e),delete t.reqs[n]},onError:function(i){t.onError(i,e),delete t.reqs[n]}},r=this.httpRequest(i);this.reqs[n]=r,r&&r.then&&r.then(i.onSuccess,i.onError)},handleClick:function(){this.disabled||(this.$refs.input.value=null,this.$refs.input.click())},handleKeydown:function(e){e.target===e.currentTarget&&(13!==e.keyCode&&32!==e.keyCode||this.handleClick())}},render:function(e){var t=this.handleClick,n=this.drag,i=this.name,r=this.handleChange,o=this.multiple,s=this.accept,a=this.listType,l=this.uploadFiles,u=this.disabled,c={class:{"el-upload":!0},on:{click:t,keydown:this.handleKeydown}};return c.class["el-upload--"+a]=!0,e("div",Ta()([c,{attrs:{tabindex:"0"}}]),[n?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:i,multiple:o,accept:s},ref:"input",on:{change:r}})])}},Aa=Object(r.a)(Oa,void 0,void 0,!1,null,null,null);Aa.options.__file="upload.vue";var Ea=Aa.exports;function za(){}var $a={name:"ElUpload",mixins:[h],components:{ElProgress:Da,UploadList:ka,Upload:Ea},provide:function(){return{uploader:this}},inject:{elForm:{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,beforeRemove:Function,onRemove:{type:Function,default:za},onChange:{type:Function,default:za},onPreview:{type:Function},onSuccess:{type:Function,default:za},onProgress:{type:Function,default:za},onError:{type:Function,default:za},fileList:{type:Array,default:function(){return[]}},autoUpload:{type:Boolean,default:!0},listType:{type:String,default:"text"},httpRequest:Function,disabled:Boolean,limit:Number,onExceed:{type:Function,default:za}},data:function(){return{uploadFiles:[],dragOver:!1,draging:!1,tempIndex:1}},computed:{uploadDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{listType:function(e){"picture-card"!==e&&"picture"!==e||this.uploadFiles.forEach(function(e){if(!e.url&&e.raw)try{e.url=URL.createObjectURL(e.raw)}catch(e){return void console.error("[Element Error][Upload]",e)}})},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=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};if("picture-card"===this.listType||"picture"===this.listType)try{t.url=URL.createObjectURL(e)}catch(e){return void console.error("[Element Error][Upload]",e)}this.uploadFiles.push(t),this.onChange(t,this.uploadFiles)},handleProgress:function(e,t){var n=this.getFile(t);this.onProgress(e,n,this.uploadFiles),n.status="uploading",n.percentage=e.percent||0},handleSuccess:function(e,t){var n=this.getFile(t);n&&(n.status="success",n.response=e,this.onSuccess(e,n,this.uploadFiles),this.onChange(n,this.uploadFiles))},handleError:function(e,t){var n=this.getFile(t),i=this.uploadFiles;n.status="fail",i.splice(i.indexOf(n),1),this.onError(e,n,this.uploadFiles),this.onChange(n,this.uploadFiles)},handleRemove:function(e,t){var n=this;t&&(e=this.getFile(t));var i=function(){n.abort(e);var t=n.uploadFiles;t.splice(t.indexOf(e),1),n.onRemove(e,t)};if(this.beforeRemove){if("function"==typeof this.beforeRemove){var r=this.beforeRemove(e,this.uploadFiles);r&&r.then?r.then(function(){i()},za):!1!==r&&i()}}else i()},getFile:function(e){var t=this.uploadFiles,n=void 0;return t.every(function(t){return!(n=e.uid===t.uid?t:null)}),n},abort:function(e){this.$refs["upload-inner"].abort(e)},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"}}}},beforeDestroy:function(){this.uploadFiles.forEach(function(e){e.url&&0===e.url.indexOf("blob:")&&URL.revokeObjectURL(e.url)})},render:function(e){var t=void 0;this.showFileList&&(t=e(ka,{attrs:{disabled:this.uploadDisabled,listType:this.listType,files:this.uploadFiles,handlePreview:this.onPreview},on:{remove:this.handleRemove}}));var n=e("upload",{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.uploadDisabled,limit:this.limit,"on-exceed":this.onExceed,"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"},[this.$slots.trigger||this.$slots.default]);return e("div",["picture-card"===this.listType?t:"",this.$slots.trigger?[n,this.$slots.default]:n,this.$slots.tip,"picture-card"!==this.listType?t:""])}},Pa=Object(r.a)($a,void 0,void 0,!1,null,null,null);Pa.options.__file="index.vue";var Fa=Pa.exports;Fa.install=function(e){e.component(Fa.name,Fa)};var Ua=Fa,Ya={name:"ElSpinner",props:{type:String,radius:{type:Number,default:100},strokeWidth:{type:Number,default:5},strokeColor:{type:String,default:"#efefef"}}},Ra=Object(r.a)(Ya,function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"el-spinner"},[t("svg",{staticClass:"el-spinner-inner",style:{width:this.radius/2+"px",height:this.radius/2+"px"},attrs:{viewBox:"0 0 50 50"}},[t("circle",{staticClass:"path",attrs:{cx:"25",cy:"25",r:"20",fill:"none",stroke:this.strokeColor,"stroke-width":this.strokeWidth}})])])},[],!1,null,null,null);Ra.options.__file="spinner.vue";var Ba=Ra.exports;Ba.install=function(e){e.component(Ba.name,Ba)};var Qa=Ba,Va={success:"success",info:"info",warning:"warning",error:"error"},Ha={data:function(){return{visible:!1,message:"",duration:3e3,type:"info",iconClass:"",customClass:"",onClose:null,showClose:!1,closed:!1,timer:null,dangerouslyUseHTMLString:!1,center:!1}},computed:{typeClass:function(){return this.type&&!this.iconClass?"el-message__icon el-icon-"+Va[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)},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))},keydown:function(e){27===e.keyCode&&(this.closed||this.close())}},mounted:function(){this.startTimer(),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}},Wa=Object(r.a)(Ha,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-message-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],class:["el-message",e.type&&!e.iconClass?"el-message--"+e.type:"",e.center?"is-center":"",e.showClose?"is-closable":"",e.customClass],attrs:{role:"alert"},on:{mouseenter:e.clearTimer,mouseleave:e.startTimer}},[e.iconClass?n("i",{class:e.iconClass}):n("i",{class:e.typeClass}),e._t("default",[e.dangerouslyUseHTMLString?n("p",{staticClass:"el-message__content",domProps:{innerHTML:e._s(e.message)}}):n("p",{staticClass:"el-message__content"},[e._v(e._s(e.message))])]),e.showClose?n("i",{staticClass:"el-message__closeBtn el-icon-close",on:{click:e.close}}):e._e()],2)])},[],!1,null,null,null);Wa.options.__file="main.vue";var Ga=Wa.exports,qa=w.a.extend(Ga),Za=void 0,Ka=[],Ja=1,Xa=function e(t){if(!w.a.prototype.$isServer){"string"==typeof(t=t||{})&&(t={message:t});var n=t.onClose,i="message_"+Ja++;return t.onClose=function(){e.close(i,n)},(Za=new qa({data:t})).id=i,bt(Za.message)&&(Za.$slots.default=[Za.message],Za.message=null),Za.vm=Za.$mount(),document.body.appendChild(Za.vm.$el),Za.vm.visible=!0,Za.dom=Za.vm.$el,Za.dom.style.zIndex=j.nextZIndex(),Ka.push(Za),Za.vm}};["success","warning","info","error"].forEach(function(e){Xa[e]=function(t){return"string"==typeof t&&(t={message:t}),t.type=e,Xa(t)}}),Xa.close=function(e,t){for(var n=0,i=Ka.length;n=0;e--)Ka[e].close()};var el=Xa,tl={name:"ElBadge",props:{value:{},max:Number,isDot:Boolean,hidden:Boolean,type:{type:String,validator:function(e){return["primary","success","warning","info","danger"].indexOf(e)>-1}}},computed:{content:function(){if(!this.isDot){var e=this.value,t=this.max;return"number"==typeof e&&"number"==typeof t&&t=this.highThreshold?t.highColor||t.highClass:t.mediumColor||t.mediumClass},showDecimalIcon:function(e){var t=this.rateDisabled&&this.valueDecimal>0&&e-1this.value,n=this.allowHalf&&this.pointerAtLeftHalf&&e-.5<=this.currentValue&&e>this.currentValue;return t||n},getIconStyle:function(e){var t=this.rateDisabled?this.colorMap.disabledVoidColor:this.colorMap.voidColor;return{color:e<=this.currentValue?this.activeColor:t}},selectValue:function(e){this.rateDisabled||(this.allowHalf&&this.pointerAtLeftHalf?(this.$emit("input",this.currentValue),this.$emit("change",this.currentValue)):(this.$emit("input",e),this.$emit("change",e)))},handleKey:function(e){if(!this.rateDisabled){var t=this.currentValue,n=e.keyCode;38===n||39===n?(this.allowHalf?t+=.5:t+=1,e.stopPropagation(),e.preventDefault()):37!==n&&40!==n||(this.allowHalf?t-=.5:t-=1,e.stopPropagation(),e.preventDefault()),t=(t=t<0?0:t)>this.max?this.max:t,this.$emit("input",t),this.$emit("change",t)}},setCurrentValue:function(e,t){if(!this.rateDisabled){if(this.allowHalf){var n=t.target;Object(C.c)(n,"el-rate__item")&&(n=n.querySelector(".el-rate__icon")),Object(C.c)(n,"el-rate__decimal")&&(n=n.parentNode),this.pointerAtLeftHalf=2*t.offsetX<=n.clientWidth,this.currentValue=this.pointerAtLeftHalf?e-.5:e}else this.currentValue=e;this.hoverIndex=e}},resetCurrentValue:function(){this.rateDisabled||(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)}},cl=Object(r.a)(ul,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-rate",attrs:{role:"slider","aria-valuenow":e.currentValue,"aria-valuetext":e.text,"aria-valuemin":"0","aria-valuemax":e.max,tabindex:"0"},on:{keydown:e.handleKey}},[e._l(e.max,function(t,i){return n("span",{key:i,staticClass:"el-rate__item",style:{cursor:e.rateDisabled?"auto":"pointer"},on:{mousemove:function(n){e.setCurrentValue(t,n)},mouseleave:e.resetCurrentValue,click:function(n){e.selectValue(t)}}},[n("i",{staticClass:"el-rate__icon",class:[e.classes[t-1],{hover:e.hoverIndex===t}],style:e.getIconStyle(t)},[e.showDecimalIcon(t)?n("i",{staticClass:"el-rate__decimal",class:e.decimalIconClass,style:e.decimalStyle}):e._e()])])}),e.showText||e.showScore?n("span",{staticClass:"el-rate__text",style:{color:e.textColor}},[e._v(e._s(e.text))]):e._e()],2)},[],!1,null,null,null);cl.options.__file="main.vue";var hl=cl.exports;hl.install=function(e){e.component(hl.name,hl)};var dl=hl,pl={name:"ElSteps",mixins:[h],props:{space:[Number,String],active:Number,direction:{type:String,default:"horizontal"},alignCenter:Boolean,simple:Boolean,finishStatus:{type:String,default:"finish"},processStatus:{type:String,default:"process"}},data:function(){return{steps:[],stepOffset:0}},methods:{getMigratingConfig:function(){return{props:{center:"center is removed."}}}},watch:{active:function(e,t){this.$emit("change",e,t)},steps:function(e){e.forEach(function(e,t){e.index=t})}}},fl=Object(r.a)(pl,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-steps",class:[!this.simple&&"el-steps--"+this.direction,this.simple&&"el-steps--simple"]},[this._t("default")],2)},[],!1,null,null,null);fl.options.__file="steps.vue";var ml=fl.exports;ml.install=function(e){e.component(ml.name,ml)};var gl=ml,vl={name:"ElStep",props:{title:String,icon:String,description:String,status:String},data:function(){return{index:-1,lineStyle:{},internalStatus:""}},beforeCreate:function(){this.$parent.steps.push(this)},beforeDestroy:function(){var e=this.$parent.steps,t=e.indexOf(this);t>=0&&e.splice(t,1)},computed:{currentStatus:function(){return this.status||this.internalStatus},prevStatus:function(){var e=this.$parent.steps[this.index-1];return e?e.currentStatus:"wait"},isCenter:function(){return this.$parent.alignCenter},isVertical:function(){return"vertical"===this.$parent.direction},isSimple:function(){return this.$parent.simple},isLast:function(){var e=this.$parent;return e.steps[e.steps.length-1]===this},stepsCount:function(){return this.$parent.steps.length},space:function(){var e=this.isSimple,t=this.$parent.space;return e?"":t},style:function(){var e={},t=this.$parent.steps.length,n="number"==typeof this.space?this.space+"px":this.space?this.space:100/(t-(this.isCenter?0:1))+"%";return e.flexBasis=n,this.isVertical?e:(this.isLast?e.maxWidth=100/this.stepsCount+"%":e.marginRight=-this.$parent.stepOffset+"px",e)}},methods:{updateStatus:function(e){var t=this.$parent.$children[this.index-1];e>this.index?this.internalStatus=this.$parent.finishStatus:e===this.index&&"error"!==this.prevStatus?this.internalStatus=this.$parent.processStatus:this.internalStatus="wait",t&&t.calcProgress(this.internalStatus)},calcProgress:function(e){var t=100,n={};n.transitionDelay=150*this.index+"ms",e===this.$parent.processStatus?(this.currentStatus,t=0):"wait"===e&&(t=0,n.transitionDelay=-150*this.index+"ms"),n.borderWidth=t?"1px":0,"vertical"===this.$parent.direction?n.height=t+"%":n.width=t+"%",this.lineStyle=n}},mounted:function(){var e=this,t=this.$watch("index",function(n){e.$watch("$parent.active",e.updateStatus,{immediate:!0}),t()})}},yl=Object(r.a)(vl,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-step",class:[!e.isSimple&&"is-"+e.$parent.direction,e.isSimple&&"is-simple",e.isLast&&!e.space&&!e.isCenter&&"is-flex",e.isCenter&&!e.isVertical&&!e.isSimple&&"is-center"],style:e.style},[n("div",{staticClass:"el-step__head",class:"is-"+e.currentStatus},[n("div",{staticClass:"el-step__line",style:e.isLast?"":{marginRight:e.$parent.stepOffset+"px"}},[n("i",{staticClass:"el-step__line-inner",style:e.lineStyle})]),n("div",{staticClass:"el-step__icon",class:"is-"+(e.icon?"icon":"text")},["success"!==e.currentStatus&&"error"!==e.currentStatus?e._t("icon",[e.icon?n("i",{staticClass:"el-step__icon-inner",class:[e.icon]}):e._e(),e.icon||e.isSimple?e._e():n("div",{staticClass:"el-step__icon-inner"},[e._v(e._s(e.index+1))])]):n("i",{staticClass:"el-step__icon-inner is-status",class:["el-icon-"+("success"===e.currentStatus?"check":"close")]})],2)]),n("div",{staticClass:"el-step__main"},[n("div",{ref:"title",staticClass:"el-step__title",class:["is-"+e.currentStatus]},[e._t("title",[e._v(e._s(e.title))])],2),e.isSimple?n("div",{staticClass:"el-step__arrow"}):n("div",{staticClass:"el-step__description",class:["is-"+e.currentStatus]},[e._t("description",[e._v(e._s(e.description))])],2)])])},[],!1,null,null,null);yl.options.__file="step.vue";var bl=yl.exports;bl.install=function(e){e.component(bl.name,bl)};var Ml=bl,wl=n(29),Cl=n.n(wl),xl={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,loop:{type:Boolean,default:!0}},data:function(){return{items:[],activeIndex:-1,containerWidth:0,timer:null,hover:!1}},computed:{hasLabel:function(){return this.items.some(function(e){return e.label.toString().length>0})}},watch:{items:function(e){e.length>0&&this.setActiveItem(this.initialIndex)},activeIndex:function(e,t){this.resetItemPosition(t),this.$emit("change",e,t)},autoplay:function(e){e?this.startTimer():this.pauseTimer()},loop:function(){this.setActiveItem(this.activeIndex)}},methods:{handleMouseEnter:function(){this.hover=!0,this.pauseTimer()},handleMouseLeave:function(){this.hover=!1,this.startTimer()},itemInStage:function(e,t){var n=this.items.length;return t===n-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[n-1].active||e.inStage&&this.items[t-1]&&this.items[t-1].active)&&"right"},handleButtonEnter:function(e){var t=this;this.items.forEach(function(n,i){e===t.itemInStage(n,i)&&(n.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(e){var t=this;this.items.forEach(function(n,i){n.translateItem(i,t.activeIndex,e)})},playSlides:function(){this.activeIndex0&&(e=this.items.indexOf(t[0]))}if(e=Number(e),!isNaN(e)&&e===Math.floor(e)){var n=this.items.length,i=this.activeIndex;this.activeIndex=e<0?this.loop?n-1:0:e>=n?this.loop?0:n-1:e,i===this.activeIndex&&this.resetItemPosition(i)}},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.throttledArrowClick=Cl()(300,!0,function(t){e.setActiveItem(t)}),this.throttledIndicatorHover=Cl()(300,function(t){e.handleIndicatorHover(t)})},mounted:function(){var e=this;this.updateItems(),this.$nextTick(function(){X(e.$el,e.resetItemPosition),e.initialIndex=0&&(e.activeIndex=e.initialIndex),e.startTimer()})},beforeDestroy:function(){this.$el&&ee(this.$el,this.resetItemPosition),this.pauseTimer()}},Nl=Object(r.a)(xl,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-carousel",class:{"el-carousel--card":"card"===e.type},on:{mouseenter:function(t){return t.stopPropagation(),e.handleMouseEnter(t)},mouseleave:function(t){return t.stopPropagation(),e.handleMouseLeave(t)}}},[n("div",{staticClass:"el-carousel__container",style:{height:e.height}},[n("transition",{attrs:{name:"carousel-arrow-left"}},["never"!==e.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===e.arrow||e.hover)&&(e.loop||e.activeIndex>0),expression:"(arrow === 'always' || hover) && (loop || activeIndex > 0)"}],staticClass:"el-carousel__arrow el-carousel__arrow--left",attrs:{type:"button"},on:{mouseenter:function(t){e.handleButtonEnter("left")},mouseleave:e.handleButtonLeave,click:function(t){t.stopPropagation(),e.throttledArrowClick(e.activeIndex-1)}}},[n("i",{staticClass:"el-icon-arrow-left"})]):e._e()]),n("transition",{attrs:{name:"carousel-arrow-right"}},["never"!==e.arrow?n("button",{directives:[{name:"show",rawName:"v-show",value:("always"===e.arrow||e.hover)&&(e.loop||e.activeIndex=n/2?n+1:e>t+1&&e-t>=n/2?-2:e},calculateTranslate:function(e,t,n){return this.inStage?n*(1.17*(e-t)+1)/4:e2&&this.$parent.loop&&(e=this.processIndex(e,t,r)),"card"===this.$parent.type?(this.inStage=Math.round(Math.abs(e-t))<=1,this.active=e===t,this.translate=this.calculateTranslate(e,t,i),this.scale=this.active?1:.83):(this.active=e===t,this.translate=i*(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.updateItems()},destroyed:function(){this.$parent&&this.$parent.updateItems()}},kl=Object(r.a)(Il,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("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,"is-animating":e.animating},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?n("div",{directives:[{name:"show",rawName:"v-show",value:!e.active,expression:"!active"}],staticClass:"el-carousel__mask"}):e._e(),e._t("default")],2)},[],!1,null,null,null);kl.options.__file="item.vue";var jl=kl.exports;jl.install=function(e){e.component(jl.name,jl)};var Tl=jl,Sl={name:"ElCollapse",componentName:"ElCollapse",props:{accordion:Boolean,value:{type:[Array,String,Number],default:function(){return[]}}},data:function(){return{activeNames:[].concat(this.value)}},provide:function(){return{collapse:this}},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),n=t.indexOf(e.name);n>-1?t.splice(n,1):t.push(e.name),this.setActiveNames(t)}}},created:function(){this.$on("item-click",this.handleItemClick)}},Ll=Object(r.a)(Sl,function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"el-collapse",attrs:{role:"tablist","aria-multiselectable":"true"}},[this._t("default")],2)},[],!1,null,null,null);Ll.options.__file="collapse.vue";var Ol=Ll.exports;Ol.install=function(e){e.component(Ol.name,Ol)};var Al=Ol,El={name:"ElCollapseItem",componentName:"ElCollapseItem",mixins:[a],components:{ElCollapseTransition:dt},data:function(){return{contentWrapStyle:{height:"auto",display:"block"},contentHeight:0,focusing:!1,isClick:!1}},inject:["collapse"],props:{title:String,name:{type:[String,Number],default:function(){return this._uid}}},computed:{isActive:function(){return this.collapse.activeNames.indexOf(this.name)>-1},id:function(){return Object(Y.e)()}},methods:{handleFocus:function(){var e=this;setTimeout(function(){e.isClick?e.isClick=!1:e.focusing=!0},50)},handleHeaderClick:function(){this.dispatch("ElCollapse","item-click",this),this.focusing=!1,this.isClick=!0},handleEnterClick:function(){this.dispatch("ElCollapse","item-click",this)}}},zl=Object(r.a)(El,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-collapse-item",class:{"is-active":e.isActive}},[n("div",{attrs:{role:"tab","aria-expanded":e.isActive,"aria-controls":"el-collapse-content-"+e.id,"aria-describedby":"el-collapse-content-"+e.id}},[n("div",{staticClass:"el-collapse-item__header",class:{focusing:e.focusing,"is-active":e.isActive},attrs:{role:"button",id:"el-collapse-head-"+e.id,tabindex:"0"},on:{click:e.handleHeaderClick,keyup:function(t){return"button"in t||!e._k(t.keyCode,"space",32,t.key,[" ","Spacebar"])||!e._k(t.keyCode,"enter",13,t.key,"Enter")?(t.stopPropagation(),e.handleEnterClick(t)):null},focus:e.handleFocus,blur:function(t){e.focusing=!1}}},[e._t("title",[e._v(e._s(e.title))]),n("i",{staticClass:"el-collapse-item__arrow el-icon-arrow-right",class:{"is-active":e.isActive}})],2)]),n("el-collapse-transition",[n("div",{directives:[{name:"show",rawName:"v-show",value:e.isActive,expression:"isActive"}],staticClass:"el-collapse-item__wrap",attrs:{role:"tabpanel","aria-hidden":!e.isActive,"aria-labelledby":"el-collapse-head-"+e.id,id:"el-collapse-content-"+e.id}},[n("div",{staticClass:"el-collapse-item__content"},[e._t("default")],2)])])],1)},[],!1,null,null,null);zl.options.__file="collapse-item.vue";var $l=zl.exports;$l.install=function(e){e.component($l.name,$l)};var Pl=$l,Fl={name:"ElCascaderMenu",data:function(){return{inputWidth:0,options:[],props:{},visible:!1,activeValue:[],value:[],expandTrigger:"click",changeOnSelect:!1,popperClass:"",hoverTimer:0,clicking:!1,id:Object(Y.e)()}},watch:{visible:function(e){e&&(this.activeValue=this.value)},value:{immediate:!0,handler:function(e){this.activeValue=e}}},computed:{activeOptions:{get:function(){var e=this,t=this.activeValue,n=["label","value","children","disabled"],i=function e(t,n){if(!t||!Array.isArray(t)||!n)return t;var i=[],r=["__IS__FLAT__OPTIONS","label","value","disabled"],o=n.children||"children";return t.forEach(function(t){var s={};r.forEach(function(e){var i=n[e],r=t[i];void 0===r&&(r=t[i=e]),void 0!==r&&(s[i]=r)}),Array.isArray(t[o])&&(s[o]=e(t[o],n)),i.push(s)}),i}(this.options,this.props);return function t(i){i.forEach(function(i){i.__IS__FLAT__OPTIONS||(n.forEach(function(t){var n=i[e.props[t]||t];void 0!==n&&(i[t]=n)}),Array.isArray(i.children)&&t(i.children))})}(i),function e(n){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=i.length;i[r]=n;var o=t[r];return null!=o&&(n=n.filter(function(e){return e.value===o})[0])&&n.children&&e(n.children,i),i}(i)}}},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.slice())},handleMenuLeave:function(){this.$emit("menuLeave")},activeItem:function(e,t){var n=this.activeOptions.length;this.activeValue.splice(t,n,e.value),this.activeOptions.splice(t+1,n,e.children),this.changeOnSelect?this.$emit("pick",this.activeValue.slice(),!1):this.$emit("activeItemChange",this.activeValue)},scrollMenu:function(e){fe(e,e.getElementsByClassName("is-active")[0])},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.$refs.menus.forEach(function(t){return e.scrollMenu(t)})})}},render:function(e){var t=this,n=this.activeValue,i=this.activeOptions,r=this.visible,o=this.expandTrigger,s=this.popperClass,a=this.hoverThreshold,l=null,u=0,c={},h=function(e){var n=c.activeMenu;if(n){var i=e.offsetX,r=n.offsetWidth,o=n.offsetHeight;if(e.target===c.activeItem){clearTimeout(t.hoverTimer);var s=c.activeItem,l=s.offsetTop,u=l+s.offsetHeight;c.hoverZone.innerHTML='\n \n \n '}else t.hoverTimer||(t.hoverTimer=setTimeout(function(){c.hoverZone.innerHTML=""},a))}},d=this._l(i,function(i,r){var s=!1,a="menu-"+t.id+"-"+r,c="menu-"+t.id+"-"+(r+1),d=t._l(i,function(i){var h={on:{}};if(i.__IS__FLAT__OPTIONS&&(s=!0),!i.disabled)if(h.on.keydown=function(e){var n=e.keyCode;if(!([37,38,39,40,13,9,27].indexOf(n)<0)){var o=e.target,s=t.$refs.menus[r],a=s.querySelectorAll("[tabindex='-1']"),l=Array.prototype.indexOf.call(a,o),u=void 0;if([38,40].indexOf(n)>-1)38===n?u=0!==l?l-1:l:40===n&&(u=l!==a.length-1?l+1:l),a[u].focus();else if(37===n){if(0!==r)t.$refs.menus[r-1].querySelector("[aria-expanded=true]").focus()}else if(39===n)i.children&&t.$refs.menus[r+1].querySelectorAll("[tabindex='-1']")[0].focus();else if(13===n){if(!i.children){var c=o.getAttribute("id");s.setAttribute("aria-activedescendant",c),t.select(i,r),t.$nextTick(function(){return t.scrollMenu(t.$refs.menus[r])})}}else 9!==n&&27!==n||t.$emit("closeInside")}},i.children){var d={click:"click",hover:"mouseenter"}[o],p=function(){t.visible&&(t.activeItem(i,r),t.$nextTick(function(){t.scrollMenu(t.$refs.menus[r]),t.scrollMenu(t.$refs.menus[r+1])}))};h.on[d]=p,"mouseenter"===d&&t.changeOnSelect&&(h.on.click=function(){-1!==t.activeValue.indexOf(i.value)&&t.$emit("closeInside",!0)}),h.on.mousedown=function(){t.clicking=!0},h.on.focus=function(){t.clicking?t.clicking=!1:p()}}else h.on.click=function(){t.select(i,r),t.$nextTick(function(){return t.scrollMenu(t.$refs.menus[r])})};return i.disabled||i.children||(l=a+"-"+u,u++),e("li",Ta()([{class:{"el-cascader-menu__item":!0,"el-cascader-menu__item--extensible":i.children,"is-active":i.value===n[r],"is-disabled":i.disabled},ref:i.value===n[r]?"activeItem":null},h,{attrs:{tabindex:i.disabled?null:-1,role:"menuitem","aria-haspopup":!!i.children,"aria-expanded":i.value===n[r],id:l,"aria-owns":i.children?c:null}}]),[e("span",[i.label])])}),p={};s&&(p.minWidth=t.inputWidth+"px");var f="hover"===o&&n.length-1===r,m={on:{}};return f&&(m.on.mousemove=h,p.position="relative"),e("ul",Ta()([{class:{"el-cascader-menu":!0,"el-cascader-menu--flexible":s}},m,{style:p,refInFor:!0,ref:"menus",attrs:{role:"menu",id:a}}]),[d,f?e("svg",{ref:"hoverZone",style:{position:"absolute",top:0,height:"100%",width:"100%",left:0,pointerEvents:"none"}}):null])});return"hover"===o&&this.$nextTick(function(){var e=t.$refs.activeItem;if(e){var n=e.parentElement,i=t.$refs.hoverZone;c={activeMenu:n,activeItem:e,hoverZone:i}}else c={}}),e("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":this.handleMenuEnter,"after-leave":this.handleMenuLeave}},[e("div",{directives:[{name:"show",value:r}],class:["el-cascader-menus el-popper",s],ref:"wrapper"},[e("div",{attrs:{"x-arrow":!0},class:"popper__arrow"}),d])])}},Ul=Object(r.a)(Fl,void 0,void 0,!1,null,null,null);Ul.options.__file="menu.vue";var Yl=Ul.exports,Rl={name:"ElCascader",directives:{Clickoutside:pe},mixins:[{props:{placement:{type:String,default:"bottom-start"},appendToBody:$.props.appendToBody,arrowOffset:$.props.arrowOffset,offset:$.props.offset,boundariesPadding:$.props.boundariesPadding,popperOptions:$.props.popperOptions},methods:$.methods,data:$.data,beforeDestroy:$.beforeDestroy},a,c],inject:{elForm:{default:""},elFormItem:{default:""}},components:{ElInput:M},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[]}},separator:{type:String,default:"/"},placeholder:{type:String,default:function(){return Object(u.b)("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},beforeFilter:{type:Function,default:function(){return function(){}}},hoverThreshold:{type:Number,default:500}},data:function(){return{currentValue:this.value||[],menu:null,debouncedInputChange:function(){},menuVisible:!1,inputHover:!1,inputValue:"",flatOptions:null,id:Object(Y.e)(),needFocus:!0,isOnComposition:!1}},computed:{labelKey:function(){return this.props.label||"label"},valueKey:function(){return this.props.value||"value"},childrenKey:function(){return this.props.children||"children"},disabledKey:function(){return this.props.disabled||"disabled"},currentLabels:function(){var e=this,t=this.options,n=[];return this.currentValue.forEach(function(i){var r=t&&t.filter(function(t){return t[e.valueKey]===i})[0];r&&(n.push(r[e.labelKey]),t=r[e.childrenKey])}),n},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},cascaderSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},cascaderDisabled:function(){return this.disabled||(this.elForm||{}).disabled},readonly:function(){return!this.filterable||!Object(Y.j)()&&!Object(Y.i)()&&!this.menuVisible}},watch:{menuVisible:function(e){this.$refs.input.$refs.input.setAttribute("aria-expanded",e),e?this.showMenu():this.hideMenu(),this.$emit("visible-change",e)},value:function(e){this.currentValue=e},currentValue:function(e){this.dispatch("ElFormItem","el.form.change",[e])},currentLabels:function(e){var t=this.showAllLevels?e.join("/"):e[e.length-1];this.$refs.input.$refs.input.setAttribute("value",t)},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 w.a(Yl).$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.menu.hoverThreshold=this.hoverThreshold,this.popperElm=this.menu.$el,this.menu.$refs.menus[0].setAttribute("id","cascader-menu-"+this.id),this.menu.$on("pick",this.handlePick),this.menu.$on("activeItemChange",this.handleActiveItemChange),this.menu.$on("menuLeave",this.doDestroy),this.menu.$on("closeInside",this.handleClickoutside)},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,this.needFocus?this.$refs.input.focus():this.needFocus=!0},handleActiveItemChange:function(e){var t=this;this.$nextTick(function(e){t.updatePopper()}),this.$emit("active-item-change",e)},handleKeydown:function(e){var t=this,n=e.keyCode;13===n?this.handleClick():40===n?(this.menuVisible=!0,setTimeout(function(){t.popperElm.querySelectorAll(".el-cascader-menu")[0].querySelectorAll("[tabindex='-1']")[0].focus()}),e.stopPropagation(),e.preventDefault()):27!==n&&9!==n||(this.inputValue="",this.menu&&(this.menu.visible=!1))},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:this.$nextTick(this.updatePopper)},handleInputChange:function(e){var t=this;if(this.menuVisible){var n=this.flatOptions;if(!e)return this.menu.options=this.options,void this.$nextTick(this.updatePopper);var i=n.filter(function(n){return n.some(function(n){return new RegExp(Object(Y.d)(e),"i").test(n[t.labelKey])})});i=i.length>0?i.map(function(n){return{__IS__FLAT__OPTIONS:!0,value:n.map(function(e){return e[t.valueKey]}),label:t.renderFilteredOptionLabel(e,n),disabled:n.some(function(e){return e[t.disabledKey]})}}):[{__IS__FLAT__OPTIONS:!0,label:this.t("el.cascader.noMatch"),value:"",disabled:!0}],this.menu.options=i,this.$nextTick(this.updatePopper)}},renderFilteredOptionLabel:function(e,t){var n=this;return t.map(function(t,i){var r=t[n.labelKey],o=r.toLowerCase().indexOf(e.toLowerCase()),s=r.slice(o,e.length+o),a=o>-1?n.highlightKeyword(r,s):r;return 0===i?a:[" "+n.separator+" ",a]})},highlightKeyword:function(e,t){var n=this,i=this._c;return e.split(t).map(function(e,r){return 0===r?e:[i("span",{class:{"el-cascader-menu__item__keyword":!0}},[n._v(t)]),e]})},flattenOptions:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],i=[];return e.forEach(function(e){var r=n.concat(e);e[t.childrenKey]?(t.changeOnSelect&&i.push(r),i=i.concat(t.flattenOptions(e[t.childrenKey],r))):i.push(r)}),i},clearValue:function(e){e.stopPropagation(),this.handlePick([],!0)},handleClickoutside:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.menuVisible&&!e&&(this.needFocus=!1),this.menuVisible=!1},handleClick:function(){this.cascaderDisabled||(this.$refs.input.focus(),this.filterable?this.menuVisible=!0:this.menuVisible=!this.menuVisible)},handleFocus:function(e){this.$emit("focus",e)},handleBlur:function(e){this.$emit("blur",e)},handleComposition:function(e){this.isOnComposition="compositionend"!==e.type}},created:function(){var e=this;this.debouncedInputChange=ae()(this.debounce,function(t){var n=e.beforeFilter(t);n&&n.then?(e.menu.options=[{__IS__FLAT__OPTIONS:!0,label:e.t("el.cascader.loading"),value:"",disabled:!0}],n.then(function(){e.$nextTick(function(){e.handleInputChange(t)})})):!1!==n&&e.$nextTick(function(){e.handleInputChange(t)})})},mounted:function(){this.flatOptions=this.flattenOptions(this.options)}},Bl=Object(r.a)(Rl,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("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.cascaderDisabled},e.cascaderSize?"el-cascader--"+e.cascaderSize:""],on:{click:e.handleClick,mouseenter:function(t){e.inputHover=!0},focus:function(t){e.inputHover=!0},mouseleave:function(t){e.inputHover=!1},blur:function(t){e.inputHover=!1},keydown:e.handleKeydown}},[n("el-input",{ref:"input",class:{"is-focus":e.menuVisible},attrs:{readonly:e.readonly,placeholder:e.currentLabels.length?void 0:e.placeholder,"validate-event":!1,size:e.size,disabled:e.cascaderDisabled},on:{input:e.debouncedInputChange,focus:e.handleFocus,blur:e.handleBlur},nativeOn:{compositionstart:function(t){return e.handleComposition(t)},compositionend:function(t){return e.handleComposition(t)}},model:{value:e.inputValue,callback:function(t){e.inputValue=t},expression:"inputValue"}},[n("template",{slot:"suffix"},[e.clearable&&e.inputHover&&e.currentLabels.length?n("i",{key:"1",staticClass:"el-input__icon el-icon-circle-close el-cascader__clearIcon",on:{click:e.clearValue}}):n("i",{key:"2",staticClass:"el-input__icon el-icon-arrow-down",class:{"is-reverse":e.menuVisible}})])],2),n("span",{directives:[{name:"show",rawName:"v-show",value:""===e.inputValue&&!e.isOnComposition,expression:"inputValue === '' && !isOnComposition"}],staticClass:"el-cascader__label"},[e.showAllLevels?[e._l(e.currentLabels,function(t,i){return[e._v("\n "+e._s(t)+"\n "),i2?parseFloat(e):parseInt(e,10)});if(4===i.length?this._alpha=Math.floor(100*parseFloat(i[3])):3===i.length&&(this._alpha=100),i.length>=3){var r=function(e,t,n){n/=100;var i=t/=100,r=Math.max(n,.01);return t*=(n*=2)<=1?n:2-n,i*=r<=1?r:2-r,{h:e,s:100*(0===n?2*i/(r+i):2*t/(n+t)),v:(n+t)/2*100}}(i[0],i[1],i[2]);n(r.h,r.s,r.v)}}else if(-1!==e.indexOf("hsv")){var o=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===o.length?this._alpha=Math.floor(100*parseFloat(o[3])):3===o.length&&(this._alpha=100),o.length>=3&&n(o[0],o[1],o[2])}else if(-1!==e.indexOf("rgb")){var s=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===s.length?this._alpha=Math.floor(100*parseFloat(s[3])):3===s.length&&(this._alpha=100),s.length>=3){var a=Jl(s[0],s[1],s[2]);n(a.h,a.s,a.v)}}else if(-1!==e.indexOf("#")){var l=e.replace("#","").trim(),u=void 0,c=void 0,h=void 0;3===l.length?(u=Kl(l[0]+l[0]),c=Kl(l[1]+l[1]),h=Kl(l[2]+l[2])):6!==l.length&&8!==l.length||(u=Kl(l.substring(0,2)),c=Kl(l.substring(2,4)),h=Kl(l.substring(4,6))),8===l.length?this._alpha=Math.floor(Kl(l.substring(6))/255*100):3!==l.length&&6!==l.length||(this._alpha=100);var d=Jl(u,c,h);n(d.h,d.s,d.v)}},e.prototype.compare=function(e){return Math.abs(e._hue-this._hue)<2&&Math.abs(e._saturation-this._saturation)<1&&Math.abs(e._value-this._value)<1&&Math.abs(e._alpha-this._alpha)<1},e.prototype.doOnChange=function(){var e=this._hue,t=this._saturation,n=this._value,i=this._alpha,r=this.format;if(this.enableAlpha)switch(r){case"hsl":var o=Wl(e,t/100,n/100);this.value="hsla("+e+", "+Math.round(100*o[1])+"%, "+Math.round(100*o[2])+"%, "+i/100+")";break;case"hsv":this.value="hsva("+e+", "+Math.round(t)+"%, "+Math.round(n)+"%, "+i/100+")";break;default:var s=Xl(e,t,n),a=s.r,l=s.g,u=s.b;this.value="rgba("+a+", "+l+", "+u+", "+i/100+")"}else switch(r){case"hsl":var c=Wl(e,t/100,n/100);this.value="hsl("+e+", "+Math.round(100*c[1])+"%, "+Math.round(100*c[2])+"%)";break;case"hsv":this.value="hsv("+e+", "+Math.round(t)+"%, "+Math.round(n)+"%)";break;case"rgb":var h=Xl(e,t,n),d=h.r,p=h.g,f=h.b;this.value="rgb("+d+", "+p+", "+f+")";break;default:this.value=function(e){var t=e.r,n=e.g,i=e.b,r=function(e){e=Math.min(Math.round(e),255);var t=Math.floor(e/16),n=e%16;return""+(ql[t]||t)+(ql[n]||n)};return isNaN(t)||isNaN(n)||isNaN(i)?"":"#"+r(t)+r(n)+r(i)}(Xl(e,t,n))}},e}(),tu=!1,nu=function(e,t){if(!w.a.prototype.$isServer){var n=function(e){t.drag&&t.drag(e)},i=function e(i){document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,tu=!1,t.end&&t.end(i)};e.addEventListener("mousedown",function(e){tu||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",n),document.addEventListener("mouseup",i),tu=!0,t.start&&t.start(e))})}},iu={name:"el-sl-panel",props:{color:{required:!0}},computed:{colorValue:function(){return{hue:this.color.get("hue"),value:this.color.get("value")}}},watch:{colorValue:function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),n=this.$el,i=n.clientWidth,r=n.clientHeight;this.cursorLeft=e*i/100,this.cursorTop=(100-t)*r/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),n=e.clientX-t.left,i=e.clientY-t.top;n=Math.max(0,n),n=Math.min(n,t.width),i=Math.max(0,i),i=Math.min(i,t.height),this.cursorLeft=n,this.cursorTop=i,this.color.set({saturation:n/t.width*100,value:100-i/t.height*100})}},mounted:function(){var e=this;nu(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%)"}}},ru=Object(r.a)(iu,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-svpanel",style:{backgroundColor:this.background}},[t("div",{staticClass:"el-color-svpanel__white"}),t("div",{staticClass:"el-color-svpanel__black"}),t("div",{staticClass:"el-color-svpanel__cursor",style:{top:this.cursorTop+"px",left:this.cursorLeft+"px"}},[t("div")])])},[],!1,null,null,null);ru.options.__file="sv-panel.vue";var ou=ru.exports,su={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},computed:{hueValue:function(){return this.color.get("hue")}},watch:{hueValue:function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),n=this.$refs.thumb,i=void 0;if(this.vertical){var r=e.clientY-t.top;r=Math.min(r,t.height-n.offsetHeight/2),r=Math.max(n.offsetHeight/2,r),i=Math.round((r-n.offsetHeight/2)/(t.height-n.offsetHeight)*360)}else{var o=e.clientX-t.left;o=Math.min(o,t.width-n.offsetWidth/2),o=Math.max(n.offsetWidth/2,o),i=Math.round((o-n.offsetWidth/2)/(t.width-n.offsetWidth)*360)}this.color.set("hue",i)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var n=this.$refs.thumb;return Math.round(t*(e.offsetWidth-n.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var n=this.$refs.thumb;return Math.round(t*(e.offsetHeight-n.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var e=this,t=this.$refs,n=t.bar,i=t.thumb,r={drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}};nu(n,r),nu(i,r),this.update()}},au=Object(r.a)(su,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);au.options.__file="hue-slider.vue";var lu=au.exports,uu={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;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),n=this.$refs.thumb;if(this.vertical){var i=e.clientY-t.top;i=Math.max(n.offsetHeight/2,i),i=Math.min(i,t.height-n.offsetHeight/2),this.color.set("alpha",Math.round((i-n.offsetHeight/2)/(t.height-n.offsetHeight)*100))}else{var r=e.clientX-t.left;r=Math.max(n.offsetWidth/2,r),r=Math.min(r,t.width-n.offsetWidth/2),this.color.set("alpha",Math.round((r-n.offsetWidth/2)/(t.width-n.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var n=this.$refs.thumb;return Math.round(t*(e.offsetWidth-n.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var n=this.$refs.thumb;return Math.round(t*(e.offsetHeight-n.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,n=e.g,i=e.b;return"linear-gradient(to right, rgba("+t+", "+n+", "+i+", 0) 0%, rgba("+t+", "+n+", "+i+", 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,n=t.bar,i=t.thumb,r={drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}};nu(n,r),nu(i,r),this.update()}},cu=Object(r.a)(uu,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":this.vertical}},[t("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:this.background},on:{click:this.handleClick}}),t("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:this.thumbLeft+"px",top:this.thumbTop+"px"}})])},[],!1,null,null,null);cu.options.__file="alpha-slider.vue";var hu=cu.exports,du={props:{colors:{type:Array,required:!0},color:{required:!0}},data:function(){return{rgbaColors:this.parseColors(this.colors,this.color)}},methods:{handleSelect:function(e){this.color.fromString(this.colors[e])},parseColors:function(e,t){return e.map(function(e){var n=new eu;return n.enableAlpha=!0,n.format="rgba",n.fromString(e),n.selected=n.value===t.value,n})}},watch:{"$parent.currentColor":function(e){var t=new eu;t.fromString(e),this.rgbaColors.forEach(function(e){e.selected=t.compare(e)})},colors:function(e){this.rgbaColors=this.parseColors(e,this.color)},color:function(e){this.rgbaColors=this.parseColors(this.colors,e)}}},pu=Object(r.a)(du,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-color-predefine"},[n("div",{staticClass:"el-color-predefine__colors"},e._l(e.rgbaColors,function(t,i){return n("div",{key:e.colors[i],staticClass:"el-color-predefine__color-selector",class:{selected:t.selected,"is-alpha":t._alpha<100},on:{click:function(t){e.handleSelect(i)}}},[n("div",{style:{"background-color":t.value}})])}),0)])},[],!1,null,null,null);pu.options.__file="predefine.vue";var fu=pu.exports,mu={name:"el-color-picker-dropdown",mixins:[$,c],components:{SvPanel:ou,HueSlider:lu,AlphaSlider:hu,ElInput:M,ElButton:ze,Predefine:fu},props:{color:{required:!0},showAlpha:Boolean,predefine:Array},data:function(){return{customInput:""}},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")},handleConfirm:function(){this.color.fromString(this.customInput)}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var t=this;!0===e&&this.$nextTick(function(){var e=t.$refs,n=e.sl,i=e.hue,r=e.alpha;n&&n.update(),i&&i.update(),r&&r.update()})},currentColor:{immediate:!0,handler:function(e){this.customInput=e}}}},gu=Object(r.a)(mu,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[n("div",{staticClass:"el-color-dropdown__main-wrapper"},[n("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:e.color,vertical:""}}),n("sv-panel",{ref:"sl",attrs:{color:e.color}})],1),e.showAlpha?n("alpha-slider",{ref:"alpha",attrs:{color:e.color}}):e._e(),e.predefine?n("predefine",{attrs:{color:e.color,colors:e.predefine}}):e._e(),n("div",{staticClass:"el-color-dropdown__btns"},[n("span",{staticClass:"el-color-dropdown__value"},[n("el-input",{attrs:{"validate-event":!1,size:"mini"},on:{blur:e.handleConfirm},nativeOn:{keyup:function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?e.handleConfirm(t):null}},model:{value:e.customInput,callback:function(t){e.customInput=t},expression:"customInput"}})],1),n("el-button",{staticClass:"el-color-dropdown__link-btn",attrs:{size:"mini",type:"text"},on:{click:function(t){e.$emit("clear")}}},[e._v("\n "+e._s(e.t("el.colorpicker.clear"))+"\n ")]),n("el-button",{staticClass:"el-color-dropdown__btn",attrs:{plain:"",size:"mini"},on:{click:e.confirmValue}},[e._v("\n "+e._s(e.t("el.colorpicker.confirm"))+"\n ")])],1)],1)])},[],!1,null,null,null);gu.options.__file="picker-dropdown.vue";var vu=gu.exports,yu={name:"ElColorPicker",mixins:[a],props:{value:String,showAlpha:Boolean,colorFormat:String,disabled:Boolean,size:String,popperClass:String,predefine:Array},inject:{elForm:{default:""},elFormItem:{default:""}},directives:{Clickoutside:pe},computed:{displayedColor:function(){return this.value||this.showPanelColor?this.displayedRgb(this.color,this.showAlpha):"transparent"},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},colorSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},colorDisabled:function(){return this.disabled||(this.elForm||{}).disabled}},watch:{value:function(e){e?e&&e!==this.color.value&&this.color.fromString(e):this.showPanelColor=!1},color:{deep:!0,handler:function(){this.showPanelColor=!0}},displayedColor:function(e){if(this.showPicker){var t=new eu({enableAlpha:this.showAlpha,format:this.colorFormat});t.fromString(this.value),e!==this.displayedRgb(t,this.showAlpha)&&this.$emit("active-change",e)}}},methods:{handleTrigger:function(){this.colorDisabled||(this.showPicker=!this.showPicker)},confirmValue:function(){var e=this.color.value;this.$emit("input",e),this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),null!==this.value&&this.dispatch("ElFormItem","el.form.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})},displayedRgb:function(e,t){if(!(e instanceof eu))throw Error("color should be instance of Color Class");var n=e.toRgb(),i=n.r,r=n.g,o=n.b;return t?"rgba("+i+", "+r+", "+o+", "+e.get("alpha")/100+")":"rgb("+i+", "+r+", "+o+")"}},mounted:function(){var e=this.value;e&&this.color.fromString(e),this.popperElm=this.$refs.dropdown.$el},data:function(){return{color:new eu({enableAlpha:this.showAlpha,format:this.colorFormat}),showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:vu}},bu=Object(r.a)(yu,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.hide,expression:"hide"}],class:["el-color-picker",e.colorDisabled?"is-disabled":"",e.colorSize?"el-color-picker--"+e.colorSize:""]},[e.colorDisabled?n("div",{staticClass:"el-color-picker__mask"}):e._e(),n("div",{staticClass:"el-color-picker__trigger",on:{click:e.handleTrigger}},[n("span",{staticClass:"el-color-picker__color",class:{"is-alpha":e.showAlpha}},[n("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:e.displayedColor}}),e.value||e.showPanelColor?e._e():n("span",{staticClass:"el-color-picker__empty el-icon-close"})]),n("span",{directives:[{name:"show",rawName:"v-show",value:e.value||e.showPanelColor,expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down"})]),n("picker-dropdown",{ref:"dropdown",class:["el-color-picker__panel",e.popperClass||""],attrs:{color:e.color,"show-alpha":e.showAlpha,predefine:e.predefine},on:{pick:e.confirmValue,clear:e.clearValue},model:{value:e.showPicker,callback:function(t){e.showPicker=t},expression:"showPicker"}})],1)},[],!1,null,null,null);bu.options.__file="main.vue";var Mu=bu.exports;Mu.install=function(e){e.component(Mu.name,Mu)};var wu=Mu,Cu={mixins:[c],name:"ElTransferPanel",componentName:"ElTransferPanel",components:{ElCheckboxGroup:sn,ElCheckbox:Kt,ElInput:M,OptionContent:{props:{option:Object},render:function(e){var t=function e(t){return"ElTransferPanel"===t.$options.componentName?t:t.$parent?e(t.$parent):t}(this),n=t.$parent||t;return t.renderContent?t.renderContent(e,this.option):n.$scopedSlots.default?n.$scopedSlots.default({option:this.option}):e("span",[this.option[t.labelProp]||this.option[t.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,checkChangeByUser:!0}},watch:{checked:function(e,t){if(this.updateAllChecked(),this.checkChangeByUser){var n=e.concat(t).filter(function(n){return-1===e.indexOf(n)||-1===t.indexOf(n)});this.$emit("checked-change",e,n)}else this.$emit("checked-change",e),this.checkChangeByUser=!0},data:function(){var e=this,t=[],n=this.filteredData.map(function(t){return t[e.keyProp]});this.checked.forEach(function(e){n.indexOf(e)>-1&&t.push(e)}),this.checkChangeByUser=!1,this.checked=t},checkableData:function(){this.updateAllChecked()},defaultChecked:{immediate:!0,handler:function(e,t){var n=this;if(!t||e.length!==t.length||!e.every(function(e){return t.indexOf(e)>-1})){var i=[],r=this.checkableData.map(function(e){return e[n.keyProp]});e.forEach(function(e){r.indexOf(e)>-1&&i.push(e)}),this.checkChangeByUser=!1,this.checked=i}}}},computed:{filteredData:function(){var e=this;return this.data.filter(function(t){return"function"==typeof e.filterMethod?e.filterMethod(e.query,t):(t[e.labelProp]||t[e.keyProp].toString()).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,n=this.format,i=n.noChecked,r=n.hasChecked;return i&&r?e>0?r.replace(/\${checked}/g,e).replace(/\${total}/g,t):i.replace(/\${total}/g,t):e+"/"+t},isIndeterminate:function(){var e=this.checked.length;return e>0&&e0&&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"},hasFooter:function(){return!!this.$slots.default}},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?this.checkableData.map(function(e){return e[t.keyProp]}):[]},clearQuery:function(){"circle-close"===this.inputIcon&&(this.query="")}}},xu=Object(r.a)(Cu,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-transfer-panel"},[n("p",{staticClass:"el-transfer-panel__header"},[n("el-checkbox",{attrs:{indeterminate:e.isIndeterminate},on:{change:e.handleAllCheckedChange},model:{value:e.allChecked,callback:function(t){e.allChecked=t},expression:"allChecked"}},[e._v("\n "+e._s(e.title)+"\n "),n("span",[e._v(e._s(e.checkedSummary))])])],1),n("div",{class:["el-transfer-panel__body",e.hasFooter?"is-with-footer":""]},[e.filterable?n("el-input",{staticClass:"el-transfer-panel__filter",attrs:{size:"small",placeholder:e.placeholder},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"}},[n("i",{class:["el-input__icon","el-icon-"+e.inputIcon],attrs:{slot:"prefix"},on:{click:e.clearQuery},slot:"prefix"})]):e._e(),n("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 n("el-checkbox",{key:t[e.keyProp],staticClass:"el-transfer-panel__item",attrs:{label:t[e.keyProp],disabled:t[e.disabledProp]}},[n("option-content",{attrs:{option:t}})],1)}),1),n("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")))]),n("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),e.hasFooter?n("p",{staticClass:"el-transfer-panel__footer"},[e._t("default")],2):e._e()])},[],!1,null,null,null);xu.options.__file="transfer-panel.vue";var Nu={name:"ElTransfer",mixins:[a,c,h],components:{TransferPanel:xu.exports,ElButton:ze},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[]}},format:{type:Object,default:function(){return{}}},filterable:Boolean,props:{type:Object,default:function(){return{label:"label",key:"key",disabled:"disabled"}}},targetOrder:{type:String,default:"original"}},data:function(){return{leftChecked:[],rightChecked:[]}},computed:{dataObj:function(){var e=this.props.key;return this.data.reduce(function(t,n){return(t[n[e]]=n)&&t},{})},sourceData:function(){var e=this;return this.data.filter(function(t){return-1===e.value.indexOf(t[e.props.key])})},targetData:function(){var e=this;return"original"===this.targetOrder?this.data.filter(function(t){return e.value.indexOf(t[e.props.key])>-1}):this.value.reduce(function(t,n){var i=e.dataObj[n];return i&&t.push(i),t},[])},hasButtonTexts:function(){return 2===this.buttonTexts.length}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}},methods:{getMigratingConfig:function(){return{props:{"footer-format":"footer-format is renamed to format."}}},onSourceCheckedChange:function(e,t){this.leftChecked=e,void 0!==t&&this.$emit("left-check-change",e,t)},onTargetCheckedChange:function(e,t){this.rightChecked=e,void 0!==t&&this.$emit("right-check-change",e,t)},addToLeft:function(){var e=this.value.slice();this.rightChecked.forEach(function(t){var n=e.indexOf(t);n>-1&&e.splice(n,1)}),this.$emit("input",e),this.$emit("change",e,"left",this.rightChecked)},addToRight:function(){var e=this,t=this.value.slice(),n=[],i=this.props.key;this.data.forEach(function(t){var r=t[i];e.leftChecked.indexOf(r)>-1&&-1===e.value.indexOf(r)&&n.push(r)}),t="unshift"===this.targetOrder?n.concat(t):t.concat(n),this.$emit("input",t),this.$emit("change",t,"right",this.leftChecked)},clearQuery:function(e){"left"===e?this.$refs.leftPanel.query="":"right"===e&&(this.$refs.rightPanel.query="")}}},Du=Object(r.a)(Nu,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-transfer"},[n("transfer-panel",e._b({ref:"leftPanel",attrs:{data:e.sourceData,title:e.titles[0]||e.t("el.transfer.titles.0"),"default-checked":e.leftDefaultChecked,placeholder:e.filterPlaceholder||e.t("el.transfer.filterPlaceholder")},on:{"checked-change":e.onSourceCheckedChange}},"transfer-panel",e.$props,!1),[e._t("left-footer")],2),n("div",{staticClass:"el-transfer__buttons"},[n("el-button",{class:["el-transfer__button",e.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===e.rightChecked.length},nativeOn:{click:function(t){return e.addToLeft(t)}}},[n("i",{staticClass:"el-icon-arrow-left"}),void 0!==e.buttonTexts[0]?n("span",[e._v(e._s(e.buttonTexts[0]))]):e._e()]),n("el-button",{class:["el-transfer__button",e.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===e.leftChecked.length},nativeOn:{click:function(t){return e.addToRight(t)}}},[void 0!==e.buttonTexts[1]?n("span",[e._v(e._s(e.buttonTexts[1]))]):e._e(),n("i",{staticClass:"el-icon-arrow-right"})])],1),n("transfer-panel",e._b({ref:"rightPanel",attrs:{data:e.targetData,title:e.titles[1]||e.t("el.transfer.titles.1"),"default-checked":e.rightDefaultChecked,placeholder:e.filterPlaceholder||e.t("el.transfer.filterPlaceholder")},on:{"checked-change":e.onTargetCheckedChange}},"transfer-panel",e.$props,!1),[e._t("right-footer")],2)],1)},[],!1,null,null,null);Du.options.__file="main.vue";var _u=Du.exports;_u.install=function(e){e.component(_u.name,_u)};var Iu=_u,ku={name:"ElContainer",componentName:"ElContainer",props:{direction:String},computed:{isVertical:function(){return"vertical"===this.direction||"horizontal"!==this.direction&&(!(!this.$slots||!this.$slots.default)&&this.$slots.default.some(function(e){var t=e.componentOptions&&e.componentOptions.tag;return"el-header"===t||"el-footer"===t}))}}},ju=Object(r.a)(ku,function(){var e=this.$createElement;return(this._self._c||e)("section",{staticClass:"el-container",class:{"is-vertical":this.isVertical}},[this._t("default")],2)},[],!1,null,null,null);ju.options.__file="main.vue";var Tu=ju.exports;Tu.install=function(e){e.component(Tu.name,Tu)};var Su=Tu,Lu={name:"ElHeader",componentName:"ElHeader",props:{height:{type:String,default:"60px"}}},Ou=Object(r.a)(Lu,function(){var e=this.$createElement;return(this._self._c||e)("header",{staticClass:"el-header",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);Ou.options.__file="main.vue";var Au=Ou.exports;Au.install=function(e){e.component(Au.name,Au)};var Eu=Au,zu={name:"ElAside",componentName:"ElAside",props:{width:{type:String,default:"300px"}}},$u=Object(r.a)(zu,function(){var e=this.$createElement;return(this._self._c||e)("aside",{staticClass:"el-aside",style:{width:this.width}},[this._t("default")],2)},[],!1,null,null,null);$u.options.__file="main.vue";var Pu=$u.exports;Pu.install=function(e){e.component(Pu.name,Pu)};var Fu=Pu,Uu={name:"ElMain",componentName:"ElMain"},Yu=Object(r.a)(Uu,function(){var e=this.$createElement;return(this._self._c||e)("main",{staticClass:"el-main"},[this._t("default")],2)},[],!1,null,null,null);Yu.options.__file="main.vue";var Ru=Yu.exports;Ru.install=function(e){e.component(Ru.name,Ru)};var Bu=Ru,Qu={name:"ElFooter",componentName:"ElFooter",props:{height:{type:String,default:"60px"}}},Vu=Object(r.a)(Qu,function(){var e=this.$createElement;return(this._self._c||e)("footer",{staticClass:"el-footer",style:{height:this.height}},[this._t("default")],2)},[],!1,null,null,null);Vu.options.__file="main.vue";var Hu=Vu.exports;Hu.install=function(e){e.component(Hu.name,Hu)};var Wu=Hu,Gu=[we,De,Le,Qe,Ge,Je,ct,vt,Dt,jt,M,At,Pt,Bt,Wt,Kt,tn,sn,cn,ye,be,fn,ze,Ue,qn,ii,xr,Sr,Ur,Wr,wt,go,Mo,No,es,hs,ms,q,Ls,$s,ea,ga,ya,wa,Ua,Da,Qa,rl,ll,dl,gl,Ml,_l,oe,Tl,Al,Pl,Vl,wu,Iu,Su,Eu,Fu,Bu,Wu,dt],qu=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};u.a.use(t.locale),u.a.i18n(t.i18n),Gu.forEach(function(t){e.component(t.name,t)}),e.use(da.directive),e.prototype.$ELEMENT={size:t.size||"",zIndex:t.zIndex||2e3},e.prototype.$loading=da.service,e.prototype.$msgbox=ho,e.prototype.$alert=ho.alert,e.prototype.$confirm=ho.confirm,e.prototype.$prompt=ho.prompt,e.prototype.$notify=Ws,e.prototype.$message=el};"undefined"!=typeof window&&window.Vue&&qu(window.Vue);t.default={version:"2.5.1",locale:u.a.use,i18n:u.a.i18n,install:qu,CollapseTransition:dt,Loading:da,Pagination:we,Dialog:De,Autocomplete:Le,Dropdown:Qe,DropdownMenu:Ge,DropdownItem:Je,Menu:ct,Submenu:vt,MenuItem:Dt,MenuItemGroup:jt,Input:M,InputNumber:At,Radio:Pt,RadioGroup:Bt,RadioButton:Wt,Checkbox:Kt,CheckboxButton:tn,CheckboxGroup:sn,Switch:cn,Select:ye,Option:be,OptionGroup:fn,Button:ze,ButtonGroup:Ue,Table:qn,TableColumn:ii,DatePicker:xr,TimeSelect:Sr,TimePicker:Ur,Popover:Wr,Tooltip:wt,MessageBox:ho,Breadcrumb:go,BreadcrumbItem:Mo,Form:No,FormItem:es,Tabs:hs,TabPane:ms,Tag:q,Tree:Ls,Alert:$s,Notification:Ws,Slider:ea,Icon:ga,Row:ya,Col:wa,Upload:Ua,Progress:Da,Spinner:Qa,Message:el,Badge:rl,Card:ll,Rate:dl,Steps:gl,Step:Ml,Carousel:_l,Scrollbar:oe,CarouselItem:Tl,Collapse:Al,CollapseItem:Pl,Cascader:Vl,ColorPicker:wu,Transfer:Iu,Container:Su,Header:Eu,Aside:Fu,Main:Bu,Footer:Wu}},function(e,t){var n=e.exports={version:"2.6.2"};"number"==typeof __e&&(__e=n)},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t,n){var i;!function(r){"use strict";var o={},s=/d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,a=/\d\d?/,l=/[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i,u=function(){};function c(e,t){for(var n=[],i=0,r=e.length;i3?0:(e-e%10!=10)*e%10]}};var v={D:function(e){return e.getDay()},DD:function(e){return d(e.getDay())},Do:function(e,t){return t.DoFn(e.getDate())},d:function(e){return e.getDate()},dd:function(e){return d(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 d(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 d(e.getHours()%12||12)},H:function(e){return e.getHours()},HH:function(e){return d(e.getHours())},m:function(e){return e.getMinutes()},mm:function(e){return d(e.getMinutes())},s:function(e){return e.getSeconds()},ss:function(e){return d(e.getSeconds())},S:function(e){return Math.round(e.getMilliseconds()/100)},SS:function(e){return d(Math.round(e.getMilliseconds()/10),2)},SSS:function(e){return d(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?"-":"+")+d(100*Math.floor(Math.abs(t)/60)+Math.abs(t)%60,4)}},y={d:[a,function(e,t){e.day=t}],M:[a,function(e,t){e.month=t-1}],yy:[a,function(e,t){var n=+(""+(new Date).getFullYear()).substr(0,2);e.year=""+(t>68?n-1:n)+t}],h:[a,function(e,t){e.hour=t}],m:[a,function(e,t){e.minute=t}],s:[a,function(e,t){e.second=t}],yyyy:[/\d{4}/,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{3}/,function(e,t){e.millisecond=t}],D:[a,u],ddd:[l,u],MMM:[l,h("monthNamesShort")],MMMM:[l,h("monthNames")],a:[l,function(e,t,n){var i=t.toLowerCase();i===n.amPm[0]?e.isPm=!1:i===n.amPm[1]&&(e.isPm=!0)}],ZZ:[/[\+\-]\d\d:?\d\d/,function(e,t){var n,i=(t+"").match(/([\+\-]|\d\d)/gi);i&&(n=60*i[1]+parseInt(i[2],10),e.timezoneOffset="+"===i[0]?n:-n)}]};y.DD=y.D,y.dddd=y.ddd,y.Do=y.dd=y.d,y.mm=y.m,y.hh=y.H=y.HH=y.h,y.MM=y.M,y.ss=y.s,y.A=y.a,o.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"},o.format=function(e,t,n){var i=n||o.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=o.masks[t]||t||o.masks.default).replace(s,function(t){return t in v?v[t](e,i):t.slice(1,t.length-1)})},o.parse=function(e,t,n){var i=n||o.i18n;if("string"!=typeof t)throw new Error("Invalid format in fecha.parse");if(t=o.masks[t]||t,e.length>1e3)return!1;var r=!0,a={};if(t.replace(s,function(t){if(y[t]){var n=y[t],o=e.search(n[0]);~o?e.replace(n[0],function(t){return n[1](a,t,i),e=e.substr(o+t.length),t}):r=!1}return y[t]?"":t.slice(1,t.length-1)}),!r)return!1;var l,u=new Date;return!0===a.isPm&&null!=a.hour&&12!=+a.hour?a.hour=+a.hour+12:!1===a.isPm&&12==+a.hour&&(a.hour=0),null!=a.timezoneOffset?(a.minute=+(a.minute||0)-+a.timezoneOffset,l=new Date(Date.UTC(a.year||u.getFullYear(),a.month||0,a.day||1,a.hour||0,a.minute||0,a.second||0,a.millisecond||0))):l=new Date(a.year||u.getFullYear(),a.month||0,a.day||1,a.hour||0,a.minute||0,a.second||0,a.millisecond||0),l},e.exports?e.exports=o:void 0===(i=function(){return o}.call(t,n,t,e))||(e.exports=i)}()},function(e,t){var n=/^(attrs|props|on|nativeOn|class|style|hook)$/;function i(e,t){return function(){e&&e.apply(this,arguments),t&&t.apply(this,arguments)}}e.exports=function(e){return e.reduce(function(e,t){var r,o,s,a,l;for(s in t)if(r=e[s],o=t[s],r&&n.test(s))if("class"===s&&("string"==typeof r&&(l=r,e[s]=r={},r[l]=!0),"string"==typeof o&&(l=o,t[s]=o={},o[l]=!0)),"on"===s||"nativeOn"===s||"hook"===s)for(a in o)r[a]=i(r[a],o[a]);else if(Array.isArray(r))e[s]=r.concat(o);else if(Array.isArray(o))e[s]=[r].concat(o);else for(a in o)r[a]=o[a];else e[s]=t[s];return e},{})}},function(e,t,n){var i=n(19);e.exports=function(e){if(!i(e))throw TypeError(e+" is not an object!");return e}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,n){var i=n(51),r=n(38);e.exports=Object.keys||function(e){return i(e,r)}},function(e,t){e.exports=!0},function(e,t){var n=0,i=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++n+i).toString(36))}},function(e,t){t.f={}.propertyIsEnumerable},function(e,t){e.exports=function(e,t,n,i){var r,o=0;return"boolean"!=typeof t&&(i=n,n=t,t=void 0),function(){var s=this,a=Number(new Date)-o,l=arguments;function u(){o=Number(new Date),n.apply(s,l)}i&&!r&&u(),r&&clearTimeout(r),void 0===i&&a>e?u():!0!==t&&(r=setTimeout(i?function(){r=void 0}:u,void 0===i?e-a:e))}}},function(e,t){e.exports=function(e){return JSON.parse(JSON.stringify(e))}},function(e){e.exports=[{lang:"zh-CN","demo-block":{"hide-text":"隐藏代码","show-text":"显示代码","button-text":"在线运行","tooltip-text":"前往 jsfiddle.net 运行此示例"},footer:{links:"链接",repo:"代码仓库",community:"社区",changelog:"更新日志",theme:"自定义主题工具",preview:"在线主题生成",faq:"常见问题",gitter:"在线讨论",starter:"脚手架",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:{links:"Links",repo:"GitHub",community:"Community",changelog:"Changelog",theme:"Theme CLI tool",preview:"Online theme generator",faq:"FAQ",gitter:"Gitter",starter:"Starter kit",feedback:"Feedback",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Component",resource:"Resource"},nav:{dropdown:"Version: "}},{lang:"es","demo-block":{"hide-text":"Ocultar","show-text":"Mostrar","button-text":"Probar","tooltip-text":"Prueba este ejemplo en jsfiddle.net"},footer:{links:"Enlaces",repo:"GitHub",community:"Comunidad",changelog:"Lista de cambios",theme:"Generador de temas por CLI",preview:"Generador de temas en línea",faq:"FAQ",gitter:"Gitter",starter:"Kit de inicio",feedback:"Comentarios",contribution:"Contribución",eleme:"Eleme"},header:{guide:"Guía",components:"Componentes",resource:"Recursos"},nav:{dropdown:"Versión: "}}]},function(e,t,n){var i=n(7),r=n(18),o=n(84),s=n(10),a=n(8),l=function(e,t,n){var u,c,h,d=e&l.F,p=e&l.G,f=e&l.S,m=e&l.P,g=e&l.B,v=e&l.W,y=p?r:r[t]||(r[t]={}),b=y.prototype,M=p?i:f?i[t]:(i[t]||{}).prototype;for(u in p&&(n=t),n)(c=!d&&M&&void 0!==M[u])&&a(y,u)||(h=c?M[u]:n[u],y[u]=p&&"function"!=typeof M[u]?n[u]:g&&c?o(h,i):v&&M[u]==h?function(e){var t=function(t,n,i){if(this instanceof e){switch(arguments.length){case 0:return new e;case 1:return new e(t);case 2:return new e(t,n)}return new e(t,n,i)}return e.apply(this,arguments)};return t.prototype=e.prototype,t}(h):m&&"function"==typeof h?o(Function.call,h):h,m&&((y.virtual||(y.virtual={}))[u]=h,e&l.R&&b&&!b[u]&&s(b,u,h)))};l.F=1,l.G=2,l.S=4,l.P=8,l.B=16,l.W=32,l.U=64,l.R=128,e.exports=l},function(e,t,n){var i=n(19);e.exports=function(e,t){if(!i(e))return e;var n,r;if(t&&"function"==typeof(n=e.toString)&&!i(r=n.call(e)))return r;if("function"==typeof(n=e.valueOf)&&!i(r=n.call(e)))return r;if(!t&&"function"==typeof(n=e.toString)&&!i(r=n.call(e)))return r;throw TypeError("Can't convert object to primitive value")}},function(e,t){e.exports=function(e){if(null==e)throw TypeError("Can't call method on "+e);return e}},function(e,t){var n=Math.ceil,i=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?i:n)(e)}},function(e,t,n){var i=n(37)("keys"),r=n(27);e.exports=function(e){return i[e]||(i[e]=r(e))}},function(e,t,n){var i=n(18),r=n(7),o=r["__core-js_shared__"]||(r["__core-js_shared__"]={});(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:i.version,mode:n(26)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t){e.exports={}},function(e,t,n){var i=n(11).f,r=n(8),o=n(14)("toStringTag");e.exports=function(e,t,n){e&&!r(e=n?e:e.prototype,o)&&i(e,o,{configurable:!0,value:t})}},function(e,t,n){t.f=n(14)},function(e,t,n){var i=n(7),r=n(18),o=n(26),s=n(42),a=n(11).f;e.exports=function(e){var t=r.Symbol||(r.Symbol=o?{}:i.Symbol||{});"_"==e.charAt(0)||e in t||a(t,e,{value:s.f(e)})}},function(e,t,n){"use strict";t.a={el:{colorpicker:{confirm:"确定",clear:"清空"},datepicker:{now:"此刻",today:"今天",cancel:"取消",clear:"清空",confirm:"确定",selectDate:"选择日期",selectTime:"选择时间",startDate:"开始日期",startTime:"开始时间",endDate:"结束日期",endTime:"结束时间",prevYear:"前一年",nextYear:"后一年",prevMonth:"上个月",nextMonth:"下个月",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:"无匹配数据",loading:"加载中",placeholder:"请选择"},pagination:{goto:"前往",pagesize:"条/页",total:"共 {total} 条",pageClassifier:"页"},messagebox:{title:"提示",confirm:"确定",cancel:"取消",error:"输入的数据不合法!"},upload:{deleteTip:"按 delete 键可删除",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){var n,i,r=e.exports={};function o(){throw new Error("setTimeout has not been defined")}function s(){throw new Error("clearTimeout has not been defined")}function a(e){if(n===setTimeout)return setTimeout(e,0);if((n===o||!n)&&setTimeout)return n=setTimeout,setTimeout(e,0);try{return n(e,0)}catch(t){try{return n.call(null,e,0)}catch(t){return n.call(this,e,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:o}catch(e){n=o}try{i="function"==typeof clearTimeout?clearTimeout:s}catch(e){i=s}}();var l,u=[],c=!1,h=-1;function d(){c&&l&&(c=!1,l.length?u=l.concat(u):h=-1,u.length&&p())}function p(){if(!c){var e=a(d);c=!0;for(var t=u.length;t;){for(l=u,u=[];++h1)for(var n=1;n was loaded but did not call our provided callback"),JSONPScriptError:o("JSONPScriptError","
    - - - +