element/1.3/en-US.933308a.js

webpackJsonp([2,4],Array(53).concat([function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAESRJREFUeAHtnW2IHdUZx88zu+vuvZtk12gikYoIyoJFEPvBqEVCrLTWqKWIUomCGPxoIa1WpSBS32ratM3HNlKIYjHkQ9VYC9YgoWryoSJtFZYIQQSDiYm72d177ya78/T/zL1ze/fufZm5d2bumZln4DJv5+U5/+d3z5kzc2YOGV1WKHCW+WJTNlPLZKaI3SnDZoMhWov1Wibjram2NrKWhc0ctue4tqba2jDL8VNMzvQQm2lTMNPriL5ekWHOdyiv5Wfm8dlFcxPguY5cd4qJBLYpNrw+Tk3I0BlAOU3M0+w409j+aGLUvE9EC3Hma2vauQEQwI3OV8zmJdfdihptKwp+PY6N2OAYwHeejTmKGvPQsOMcWjNmjuDYog22xW1DpgGcrfBVaBbvhmNvgYNvxLoQt6CRpE9UhmM+wB/lXTT3BybG6Fgk6VqYSOYAnGVezyVzryG+HzXcDRZqHtok1IYfGqaXqWhemyA04RlaMgGgNKUzJXM7ATr4Zhv2L8iQj+pFAYjnsHOQAeNk0bwlTXf9ZEo3Ug3gPPMlS2V3J2qHh9B5uCilPujJbHRmTqOWf2m44OxeQ/RVT4lYECmVAJZKfNmicR+DE3agthuzQMeBmYBasII/395R47xYLNIXAzOkx4xTBSA6FVfysvs4Ls4fkGa3xzJnMprXHDPvoyHnBXRaPktLIVMBoNebdd2njaF7AN5QWsQdhJ0AcRl3xveT4zyVht6z1QACtsJMyX0Soj6K7dFBODSteUKzRWi2a7LoPIftsq3lsBbAsxXe5rq8ByJeYat4abAL8B13HHpk3RgdtNFe6wAsl/nyCvMfcNP4LhsFS61NRK+PEf20UKDPbSqDY4sxqOmGZsr8OOD7VOGLwSv4Q4u2orFoHUMOPSVpRQ24wLzpfJlfhTBbeiqFRgqlAJrl90YKdN840YlQEWMIPHAAZyp8q1nmV3Ava2MM5dMk2yiAe6gnzRBtnxyjd9oESeTwwJpgr8ldWH7GuPx3hS8RX6/IxNMc2s/AB4NskgdSAy4s8KXniP+Ca72bV6iiO4NRgOjwBUw/GR+nL5M2IHEAZ0ss4/DexD9wQ9KF1fzaK4Am+RSuDe+YKNLR9qGiP5NoE4wnGre5hg8pfNE7st8UxSfiG/FRv2mFiZ8YgLNl3s4uv4FmtxjGQA2boALwjfhIfJVUrokA+E2Jd6LZ3YffcFIF03x6U0B8JL4Sn/WWQrhYsV4DoiA0W3Z/jWHxj4YzS0PboABeB9g1UXB+gWtDvNEQzxIbgB58JfdPsPyheEzXVJNQAIDsnSg6D8cFYWxNsFfzKXxJMBJrHqhAdogv48oklhrQu35g97dxGa3pDkABcn52YZF2R51z5AB6vd1qhyPytKMuvKYXXAFpgvF7YKJArwSP1T1kpJDIPSTpxktPqnvWGiJtCgDAJXLoToy0fjsq2yMDUJ5wyI1Mvc8XlWssTYeo5BjaGtUTk0gAlGe75w1/rE84LIUmYrPksd2IoWujeHbcdy8Yze2QDCxQ+CL2ssXJia89n0cwsLVvAGdLeFtNR7VYjEtMpsHnnu/7TL6vJtgbTCrj+Zj7BrnPcmj0ASiATolrHPpBP4NaewbQG0Zf8q77dCTzAJxvS5YysnqkiOvBHof391RzyXWf9w6HDqO3hYOB2YHrwY2193l6etGpJwBnK0ZeFN8ysFJrxlYpICwIE70YFboJrr23K69O6ri+XhTPahzcH8R7x1eHfe84dA2Id0v3KHxZpaiPcqFC8tgImUQoAOVzGYDvzpB5aPC8KAA2PEZClDdwE4x2voCBBp9gfUWI9DVozhTArZnjGLDwbawDfRApcA0oX6lS+HJGUw/FFUaElaBRA9WA1e/z8X+ReCa/vRxULA0XTAHUfosYNXNNkO8TBqoBGR+HVPiCiR91qMMffh51krGnB1ZGhZkgGXUFELXflfJl0iCJaZjoFRAA0wihMFNlp7MmXQGUbzKD6J7ucnfOWs8GVSCNEAoz3ve8uxSyI4DyNXr5IHiXNPR0AgqkEUJhx2Oogz4dAZSpEECyfo2+g4BJnkobhMKOMNRJo7YAyiQwGOmwo1NkPZe8AmmDUBgSltop1RZAmYEIBOd6Eph2og36eJogFIa82azaiNYSQK/ZxfRXbeLoYQsUSBOE3lRqbS7lWgIoE/9hnFeu5l6zgKnQJqQFQmFJmGpVwJYA1madbBVej1mmQFogbMfUqkdx3ny7ZT6BZtjKx26fHT9j/vbOMXN2PhcTigfG/eYbLjfys3XB47lzVKBNzfMdr6oBZbJnW+ETcRW+1ojZXhMKU95E4k3mrwIQc9DqjecmkXQ3IgWqE4qvSGwFgN6oF+bNK0JYtvPDW68y69bovIXNbrG9CRZ7UQveIIw12r7iGhDTOD2BUQzPNQbQ7cEq8Mzuw10NSAN8fiEwjeyTkwV63t9fUQMC0Vv8E7pOhwJpgs9TtImxOoCoHkfxNcwb0yG7WikKpA4+2CyMCWu+B+sAzlfMZtSABf+Eru1WII3weYqCMY+1mrx1AJdcd6vdkqt1vgKpha9WgEbW6gBi7JYC6HvY4nXa4fOkbWDNAxBt8ji6w9dbrLuaBgUyAR/KIawJc+JUD8DZRXMTDujAU1HE0iUr8Im8wpowJ9vVJpjNdbKji50KZAm+usI15jwAyXWn6id0wyoFMgkfFPaZq14DEimAVmH3f2MEwCwumHTEY85vghXALHrZ5jKx8Zijs8wXL5fcUzbbqrZlU4GhorPBMeUqidksopbKagXAnrNMCqDVTsqwccKeQ6w94Az72OqiCXsA0Og0C1a7KbvGCXsOusNrs1tELZnNCgh7DgZoKYA2eynLtoE9zLypAGbZx1aXDew5zGaN1UaqcZlVQNhzSGvAzDrY9oIJe3oNaLuXsmyfXgNm2bspKJtXA6bATjUxuwpIEzyX3eJpyaxWAOwN4zbMHCBMzbcA/3nCmGf+Rear8oqPOtR1vqTA5pffYfPdTfVDHTfyll5HMZI+CfbomwX33xilf03Sefea3/cPkjnZBj4/TYHw79vwCnSAJW/pBZAkwSD0H7kRnaomuBt8ol672rGVsnlLr5UGAzsG9mQwQqoAHJhYmnHkCgh7qasBI1dBExycAtUakOcHZ4HmnGsFmOcwHMuczLUIWvjBKUDmFAB0pgdngeacZwWEPWeIjQKYZwoGWHZhzzEFBXCAPsh31mDPWUf0NSaUO5NvJbT0SSsgzAl71S8jkNaCSTsg9/nVmKt+nIhZrwNzT0SyAlCNuerHiRztCScrv+bGNeb8JvgjlUQVSFQBMh5zHoATo+Z9TCZ3PlEDNLPcKiCsCXMiQPUakGgBg5eO5lYRLXiiCghrgHBBMq02wbLFfEhWuqgCsSvQwFodwGHHUQBjV14zEAUaWasDuGbMHMFcIWWVSBWIVQEw5rFWy6QOINrkRbxl8UGsmWviuVdAGBPWfCHqAHoHiN71T+haFYhFgSbGVgCITyUciCVTTVQVqCnQzNgKACfG6Biqxw9VLVUgDgWELWGsMe0VAHonmF5uDKDbqkBkCrRgaxWAVDSvgdRzkWWqCakCUECYEraaxVgF4AR5YwMPNgfUfVWgTwUO1thakcwqAOUst6gqV8TSHVUgpALtmGoJ4GTRvIURq6dD5qHBVYGWCghLwlSrky0BRHt93hC/1CqCHlMFQisAljymWkRsCaCEGy44uxGp0iKOHlIFAisgDAlL7SK0BXAN0VdseG+7iHpcFQiigDAkLLUL2xZAiTBqnBfbVZ3tEtTjqoCvgLAjDPn7rdYdASwW6Qt0ife1iqjHVIGuCoAdj6EOATsCKPFoyHkBJC93SCPRU8tL3e+RBwnjGx0kbJAwaUnPtzPutTAj7HTLpyuAeHb3Ge4M7u+WUFLnT5/4wnQCQs5JmKBL3tILqkv/4Xh/lZ3OKQ13Pl0
_.default)(s,t,a);return D.casting[l.name]=l,this}function t(s){return D.onStage=s,this}function a(){return D.casting[D.onStage]||null}function l(){function s(a){if(p.default.isArray(a)&&a.forEach(function(t){s(t)}),p.default.isString(a)){var l=a.split(":"),n=void 0;l.length>1&&"\\"!==l[0].charAt(l[0].length-1)&&(n=l.shift(),s({name:"erase",actor:n}));var e=l.join(":").replace(/\\:/g,":"),i={name:"type",args:[e]};null!=n&&(i.actor=n),s(i)}p.default.isFunction(a)&&s({name:"callback",args:[a]}),p.default.isNumber(a)&&s(a>0?{name:"wait",args:[a]}:{name:"erase",args:[a]}),p.default.isObject(a)&&(p.default.isArray(a.args)||(a.args=[]),a.args.unshift(function(){y(a.name+":end",a),o()}),t.push(a))}for(var t=[],a=arguments.length,l=Array(a),n=0;n<a;n++)l[n]=arguments[n];return s([{name:"publisher",args:["sequence:start"]}].concat(l).concat({name:"publisher",args:["sequence:end"]})),Array.prototype.push.apply(D.scenario,t),D.options.autoplay&&i(),this}function i(){return"stopping"===D.status&&(D.status="playing"),"ready"===D.status&&(D.status="playing",o()),this}function v(s){return("ready"===D.status||p.default.isFunction(s))&&(D.currentScene=-1,"ready"===D.status?i():s()),this}function r(){return D.status="stopping",this}function o(){if("stopping"===D.status)return D.status="ready",this;if("playing"!==D.status)return this;if(D.currentScene+1>=D.scenario.length)return D.status="ready",y("scenario:end"),this;var s=D.scenario[++D.currentScene];if(0===D.currentScene&&y("scenario:start"),"publisher"===s.name){var a=e(s.args),l=a[0],i=a.slice(1);return y.apply(void 0,n(i)),l()}switch(s.actor&&t(s.actor),y(s.name+":start",s),s.name){case"type":h.apply(void 0,n(s.args));break;case"erase":C.apply(void 0,n(s.args));break;case"callback":m.apply(void 0,n(s.args));break;case"wait":b.apply(void 0,n(s.args));break;default:console.debug("No scene handler for "+s.name)}return this}function h(s,t){var l=a(),n=D.options.locale,e=D.options.minSpeed.type,i=D.options.maxSpeed.type,v=l.displayValue,_=-1,r=!1,c=null,o=null,p=g.default.map(t);return t=g.default.strip(t),function a(){var h=g.default.strip(l.displayValue.substr(v.length));if(h===t)return s();var C=t.substr(0,_+1),u=h!==C,j=l.shouldBeMistaken(h,t,c,o),m=r||!j;if(u&&m)r=!0,c=null,l.displayValue=v+g.default.inject(h.substr(0,h.length-1),p),_--,o=_;else{r=!1;var b=t.charAt(++_);j&&(b=d.default.randomCharNear(b,n),null==c&&(c=_)),l.displayValue=v+g.default.inject(h+b,p)}return setTimeout(a,l.getTypingSpeed(e,i))}(),this}function C(s,t){var l=a();if(null==l)return s();if(w.erase!==!0)return l.displayValue="",s();var n=D.options.minSpeed.erase,e=D.options.maxSpeed.erase,i=l.displayValue,v=g.default.map(i);i=g.default.strip(i);var _=i.length,r=void 0,c=0;return p.default.isNumber(t)&&(t>0?r=t:c=i.length+t),function t(){return _===c?s():(l.displayValue=g.default.inject(i.substr(0,--_),v),setTimeout(t,r||l.getTypingSpeed(n,e)))}(),this}function m(s,t){return t.call(this,s),this}function b(s,t){return setTimeout(s.bind(this),t),this}function f(s,t){return s.split(",").forEach(function(s){s=s.trim(),p.default.isArray(D.events[s])||(D.events[s]=[]),D.events[s].push(t)}),this}function y(){for(var s=arguments.length,t=Array(s),a=0;a<s;a++)t[a]=arguments[a];var l=t[0],n=D.events[l]||[];return n.length>0&&n.concat(D.events["*"]||[]).forEach(function(s){return s.apply(void 0,t)}),this}var w=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];if(w=c.default.merge({},j,w),p.default.isNumber(w.minSpeed)){var k=w,x=k.minSpeed;w.minSpeed={erase:x,type:x}}if(p.default.isNumber(w.maxSpeed)){var A=w,I=A.maxSpeed;w.maxSpeed={erase:I,type:I}}if("detect"===w.locale&&u){var T=u.languages;p.default.isArray(T)&&p.default.isString(T[0])&&(w.locale=T[0].substr(0,2))}d.default.supports(w.locale)||(w.locale=d.default.defaultLocale);var D={options:w,casting:{},status:"ready",onStage:null,currentScene:-1,scenario:[],events:{}};return t(null),Object.freeze(Object.defineProperties({addActor:s,getCurrentActor:a,addScene:l,play:i,replay:v,stop:r,on:f},{options:{get:function(){return D.options},configurable:!0,enumerable:
},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjgxcHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDgxIDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+TW9kdWxlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cmVjdCBpZD0icGF0aC0xIiB4PSI2IiB5PSI1NyIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIiByeD0iNS41Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwLjQ2NjY2NjY2NyAgIDAgMCAwIDAgMC44MDc4NDMxMzcgIDAgMCAwIDEgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICAgICAgPHJlY3QgaWQ9InBhdGgtMyIgeD0iNiIgeT0iNTciIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMSIgcng9IjUuNSI+PC9yZWN0PgogICAgICAgIDxmaWx0ZXIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTQiPgogICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIxIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMC4zOTIxNTY4NjMgICAwIDAgMCAwIDAuNTg4MjM1Mjk0ICAgMCAwIDAgMCAwLjg2Mjc0NTA5OCAgMCAwIDAgMSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgICAgICA8cmVjdCBpZD0icGF0aC01IiB4PSI2IiB5PSI1NyIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIiByeD0iNS41Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItNiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAxICAgMCAwIDAgMCAwLjY3NDUwOTgwNCAgIDAgMCAwIDAgMC42Nzg0MzEzNzMgIDAgMCAwIDEgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTW9kdWxlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0yKSIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiMyMEEwRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMtY29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOS
attrs:{id:"1-1-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.3")]),a("p",[a("em",[s._v("2017-01-09")])]),a("ul",[a("li",[s._v("Fixed DatePicker not firing change event when cleared for the first time upon page load, #2167")]),a("li",[s._v("Fixed DatePicker year calculating error when choosing the next year, #2152")]),a("li",[s._v("Added "),a("code",[s._v("default-sort-prop")]),s._v(" and "),a("code",[s._v("default-sort-order")]),s._v(" attributes for Table, #2182 (by @njleonzhang)")]),a("li",[s._v("Fixed filterable Select filtering other options with initial value, #2196")]),a("li",[s._v("Added custom i18n processing, making Element compatible with i18n plugins other than "),a("code",[s._v("vue-i18n")]),s._v(", #2129")]),a("li",[s._v("Added "),a("code",[s._v("resize")]),s._v(" attribute for Input, #2263 (by @Kingwl)")]),a("li",[s._v("Fixed Autocomplete not hiding dropdown when blurred, #2247")]),a("li",[s._v("Fixed style issues with nested Tabs, #2212 (by @Kingwl)")]),a("li",[s._v("Fixed Tabs' tab bar locating error when non-first item is initially activated, #2192")])]),a("h3",{attrs:{id:"1-1-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.2")]),a("p",[a("em",[s._v("2016-12-30")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("sortable")]),s._v(" and "),a("code",[s._v("fixed")]),s._v(" attribute of Table not working in Vue 2.1.7+")]),a("li",[s._v("Fixed Input Number not resetting on blur when input with illegal values, #2098")]),a("li",[s._v("Removed "),a("code",[s._v("title")]),s._v(" scoped slot of Collapse, and added "),a("code",[s._v("title")]),s._v(" named slot, #2100")]),a("li",[s._v("Fixed range selection in TimePicker not working issue")]),a("li",[s._v("Fixed Tabs' active tab switching when a non-active tab is removed, #2106")]),a("li",[s._v("Fixed console error reporting when navigating Select with arrow keys, #2120")]),a("li",[s._v("Fixed incorrect validation timing of filterable Select in Form, #2120")])]),a("h3",{attrs:{id:"1-1-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.1")]),a("p",[a("em",[s._v("2016-12-29")])]),a("ul",[a("li",[s._v("Fixed compatibility issue with latest Vue due to compilation")])]),a("h3",{attrs:{id:"1-1-0-helium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-0-helium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.0 Helium")]),a("p",[a("em",[s._v("2016-12-29")])]),a("h4",{attrs:{id:"new-features-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Two brand new components: Carousel and Collapse")]),a("li",[s._v("SSR supported")]),a("li",[s._v("Scrollbars' style inside components is upgraded")]),a("li",[s._v("Table now supports custom templates via "),a("a",{attrs:{href:"http://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("scoped slots")]),s._v("; the good old "),a("code",[s._v("inline-template")]),s._v(" is still compatible, but it's no longer recommended and is likely to be removed in the future")]),a("li",[s._v("Table now supports expandable rows")]),a("li",[s._v("DatePicker now supports specifying the first day of week")]),a("li",[s._v("TimeSelect now supports "),a("code",[s._v("maxTime")])]),a("li",[s._v("Autocomplete now supports "),a("code",[s._v("popper-class")])]),a("li",[s._v("To customize template of Tab-Pane, now you can use the "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("label")])])]),a("h4",{attrs:{id:"fixes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[a("code",[s._v("change")]),s._v(" event of DatePicker incorrectly triggering multiple times, #2070")]),a("li",[s._v("Width shaking of tab-pane while initializing, #1883")])]),a("h4",{attrs:{id:"breaking-changes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-3","aria-hidden":"true"}},[
},[l("img",{attrs:{src:a(71),alt:""}}),l("h3",[s._v("Resource")]),l("p",[s._v("Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/resource",exact:""}},[s._v("View Detail\n          ")])],1)])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"banner"},[l("div",{staticClass:"banner-sky"}),l("img",{staticClass:"banner-stars",attrs:{src:a(72),alt:"Element"}}),l("div",{staticClass:"container"},[l("div",{staticClass:"banner-desc"},[l("h2",[s._v("A Desktop UI Library")]),l("div",{staticClass:"actor",attrs:{id:"line2"}}),l("p",[s._v("Element, a Vue 2.0 based component library for developers, designers and product managers")])]),l("img",{attrs:{src:a(73),alt:"Element"}})])])}]}},function(s,t,a){function l(s){a(119)}var n=a(13)(a(121),a(122),l,"data-v-d0518674",null);s.exports=n.exports},function(s,t,a){var l=a(120);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("23d8d63a",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,"h3[data-v-d0518674]{margin-bottom:15px}.block[data-v-d0518674]{margin-bottom:55px}p[data-v-d0518674]{margin:0 0 15px}.nav-demos p[data-v-d0518674]{margin-bottom:50px}.nav-demos h5[data-v-d0518674]{margin:0}.nav-demos img[data-v-d0518674]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-d0518674]{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.dialog-img .imgWrap[data-v-d0518674]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-d0518674]{display:block;width:100%}.mask[data-v-d0518674]{position:fixed;top:0;right:0;left:0;bottom:0;background-color:#373737;background-color:rgba(55,55,55,.6);height:100%;z-index:1000}.zoom-enter-active[data-v-d0518674],.zoom-leave-active[data-v-d0518674]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-d0518674],.zoom-leave-active[data-v-d0518674]{transform:scale(.3);opacity:0}.fade-enter-active[data-v-d0518674],.fade-leave-active[data-v-d0518674]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-d0518674],.fade-leave-active[data-v-d0518674]{opacity:0}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(s){document.body.style.overflow=s?"hidden":""}},methods:{enlarge:function(s,t){var a=t.target,l={},n=document;l.left=(n.body.scrollWidth-s)/2,l.top=100,this.imgUrl=a.src,this.imgBound=a.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=s+"px",this.showDialog=!0}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("Navigation")]),s._m(0),s._m(1),l("div",{staticClass:"block"},[l("h3",[s._v("Side Navigation")]),l("el-row",{attrs:{gutter:20}},[l("el-col",{attrs:{span:9}},[l("p",[s._v("Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:15}},[l("img",{attrs:{src:a(79),alt:"Level 1 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 1 categories")]),l("p",[s._v("Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.")]),l("img",{attrs:{src:a(80),alt:"Level 2 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 2 categories")]),l("p",[s._v("Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.")]),l("img",{attrs
},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("title")])]),a("td",[s._v("title "),a("strong",[s._v("REQUIRED")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("component type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("descriptive text. Can also be passed with the default slot")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("if closable or not")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-text")]),a("td",[s._v("customized close button text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-icon")]),a("td",[s._v("if a type icon is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("fires when alert is closed")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(405)},function(s,t,a){function l(s){a(406)}var n=a(13)(null,a(408),l,"data-v-39800af8",null);s.exports=n.exports},function(s,t,a){var l=a(407);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("1d99a05c",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.clearfix[data-v-39800af8]:after,.clearfix[data-v-39800af8]:before{display:table;content:""}.clearfix[data-v-39800af8]:after{clear:both}.share-button[data-v-39800af8]{width:36px;padding:10px}.mark[data-v-39800af8]{margin-top:8px;line-height:1;float:right}.item[data-v-39800af8]{margin-right:40px}',""])},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A number or status mark on buttons and icons.")]),s._m(1),a("p",[s._v("Displays the amount of new messages.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="12" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">replies</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    Click Me<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      comments\n      <el-badge class="mark" :value="12">\n    </el-badge></el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      replies\n      <el-badge class="mark" :value="3">\n    </el-badge></el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n\n',script:null,style:"\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Click Me"),a("i",{staticC
},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Primary Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Text Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Different colors represent different meanings.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">Default</span>\n  <span class="wrapper">\n    <el-button type="success">Success</el-button>\n    <el-button type="warning">Warning</el-button>\n    <el-button type="danger">Danger</el-button>\n    <el-button type="info">Info</el-button>\n  </span>\n</div>\n<div class="block">\n  <span class="demonstration">Hover to display color</span>\n  <span class="wrapper">\n    <el-button :plain="true" type="success">Success</el-button>\n    <el-button :plain="true" type="warning">Warning</el-button>\n    <el-button :plain="true" type="danger">Danger</el-button>\n    <el-button :plain="true" type="info">Info</el-button>\n  </span>\n</div>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{type:"success"}},[s._v("Success")]),a("el-button",{attrs:{type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger"}},[s._v("Danger")]),a("el-button",{attrs:{type:"info"}},[s._v("Info")])],1)]),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Hover to display color")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{plain:!0,type:"success"}},[s._v("Success")]),a("el-button",{attrs:{plain:!0,type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{plain:!0,type:"danger"}},[s._v("Danger")]),a("el-button",{attrs:{plain:!0,type:"info"}},[s._v("Info")])],1)])]),a("p",[s._v("Use "),a("code",[s._v("plain")]),s._v(" attribute to create a plain button, and it accepts a "),a("code",[s._v("Boolean")]),s._v(" value. You can assign different "),a("code",[s._v("type")]),s._v(" to a plain button as mentioned above. "),a("strong",[s._v("Note")]),s._v(": When using the plain button, you still can set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("text")]),s._v(", but it makes no difference. A plain button will be styled like a "),a("code",[s._v("text button")]),s._v(" by default.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{stat
staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n  }\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),l("p",[s._v("The header part can be omitted.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n\n',script:null,style:"\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n"}}},[l("div",{staticClass:"source",slot:"source"},[l("el-card",{staticClass:"box-card"},s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n    "+s._s("List item "+t)+"\n  ")])}))],1),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'List item ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),l("p",[s._v("Display richer content by adding some configs.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :k
staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("When a page is wide enough but has limited height, you can activate card mode for carousels")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n\n',script:null,style:"\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("Setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._v(" activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._
},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._
staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Messag
},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{stati
},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Parent options can also be selected.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options" change-on-select></el-cascader>\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n  
staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities.length) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v("\n            }];\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities.length) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Orlando'")]),s._v("\n            }];\n          }\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Search and select options with a keyword.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">Only options of the last level can be selected</span>\n  <el-cascader placeholder="Try searching: Guide" :options="options" filterable></el-cascader>\n</div>\n<div class="block">\n  <span class="demonstration">Options of all levels can be selected</span>\n  <el-cascader placeholder="Try searching: Guide" :options="options" filterable="" change-on-select></el-cascader>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\
},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Disable an option by setting a "),a("code",[s._v("disabled")]),s._v(" field in the option object.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"display-only-the-last-level"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#display-only-the-last-level","aria-hidden":"true"}},[s._v("¶")]),s._v(" Display only the last level")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-default-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-default-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" With default value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"change-on-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Change on select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dynamically-load-child-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dynamically-load-child-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dynamically load child options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filterable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filterable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("options")]),a("td",[s._v("data of the options")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("selected value")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Cascader's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("input placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Select")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Cascader is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether selected value can be cleared")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-trigger")]),a("td",[s._v("trigger mode of expanding current item")]),a("td",[s._v("string")]),a("td",[s._v("click / hover")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("show-all-levels")]),a("td",[s._v("whether to display all levels of the selected value in the input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether the options can be searched")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing filter keyword, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("change-on-select")]),a("td",[s._v("whether selecting an option of any level is permitted")]),a("td",[s._v("boolean")]
},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"city === 'Shenzhen'\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("fill")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#324057"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v(
staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse accordion>\n  <el-collapse-item name="1">\n    <template slot="title">\n      Consistency<i class="header-icon el-icon-information"></i>\n    </template>\n    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficiency" name="3">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllability" name="4">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",{attrs:{name:"1"}},[a("template",{slot:"title"},[s._v("\n      Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),a("div",[s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so t
staticClass:"hljs language-shell"},[s._v("npm i element-theme -g\n")])]),a("p",[s._v("Then install the default theme from npm or GitHub.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("# from npm\nnpm i element-theme-default -D\n\n# from GitHub\nnpm i https://github.com/ElementUI/theme-default -D\n")])]),a("h3",{attrs:{id:"initialize-variable-file"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#initialize-variable-file","aria-hidden":"true"}},[s._v("¶")]),s._v(" Initialize variable file")]),a("p",[s._v("After successfully installing the above packages, a command named "),a("code",[s._v("et")]),s._v(" is available in CLI (if the packages are installed locally, use "),a("code",[s._v("node_modules/.bin/et")]),s._v(" instead). Run "),a("code",[s._v("-i")]),s._v(" to initialize the variable file which outputs to "),a("code",[s._v("element-variables.css")]),s._v(" by default. And you can specify its output directory as you will.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),a("p",[s._v("In "),a("code",[s._v("element-variables.css")]),s._v(" you can find all the variables we used to style Element and they are defined in CSS4 style:")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":root")]),s._v(" {\n\n  "),a("span",{staticClass:"hljs-comment"},[s._v("/* Colors\n  -------------------------- */")]),s._v("\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-success")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#13ce66")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-warning")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#f7ba2a")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-danger")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#ff4949")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-info")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#50BFFF")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#2e90fe")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-light")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#5da9ff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-lighter")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(var(--color-blue), "),a("span",{staticClass:"hljs-number"},[s._v("0.12")]),s._v(");\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-white")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-black")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#000")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-grey")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#C0CCDA")]),s._v(";\n")])]),a("h3",{attrs:{id:"modify-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modify-variables","aria-hidden":"true"}},[s._v("¶")]),s._v(" Modify variables")]),a("p",[s._v("Just edit "),a("code",[s._v("element-variables.css")]),s._v(", e.g. changing the theme color to red:")]),a("pre",[a("code",{staticClass:"hljs language-CSS"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-selector-tag"},[s._v("red")]),s._v(";\n")])]),a("h3",{attrs:{id:"build-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#build-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Build theme")]),a("p",[s._v("After saving the variable file, use "),a("code",[s._v("et")]),s._v(" to build your theme. You can activate "),a("code",[s._v("watch")]),s._v(" mode by adding a parameter "),a("code",[s._v("-w")]),s._v(". And if you customized the v
staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last 3 months'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DatePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"enter-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enter-date","aria-hidden":"true"}},[s._v("¶")]),s._v(" Enter Date")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"other-measurements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#other-measurements","aria-hidden":"true"}},[s._v("¶")]),s._v(" Other measurements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date Range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]
},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(473)},function(s,t,a){function l(s){a(474)}var n=a(13)(a(476),a(477),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(475);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("5a99cc82",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-dialog .dialog-footer button:first-child{margin-right:10px}.demo-box.demo-dialog .full-image{width:100%}.demo-box.demo-dialog .el-dialog__wrapper{margin:0}.demo-box.demo-dialog .el-input,.demo-box.demo-dialog .el-select{width:300px}.demo-box.demo-dialog .el-button--text{margin-right:15px}",""])},function(s,t){"use strict";s.exports={data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],dialogVisible:!1,dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}},methods:{handleClose:function(s){this.$confirm("Are you sure to close this dialog?").then(function(t){s()}).catch(function(s){})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Informs users while preserving the current page state.")]),s._m(1),a("p",[s._v("Dia
},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("content of Dialog")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("content of the Dialog title")])]),a("tr",[a("td",[s._v("footer")]),a("td",[s._v("content of the Dialog footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("triggers when the Dialog opens")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when the Dialog closes")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(479)},function(s,t,a){function l(s){a(480)}var n=a(13)(a(482),a(483),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(481);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("ef55a3b6",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box .el-dropdown{vertical-align:top}.demo-box .el-dropdown+.el-dropdown{margin-left:15px}.demo-box .el-dropdown-link{cursor:pointer;color:#20a0ff}.demo-box .el-icon-caret-bottom{font-size:12px}.block-col-2{margin:-24px}.block-col-2 .el-col{padding:30px 0;text-align:center;border-right:1px solid #eff2f6}.block-col-2 .el-col:last-child{border-right:0}.demo-dropdown .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Toggleable menu for displaying lists of links and actions.")]),s._m(1),a("p",[s._v("Hover on the dropdown menu to unfold it for more actions.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown>\n  <span class="el-dropdown-link">\n    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("p",[s._v("The triggering element is rendered by the default "),a("code",[s._v("slot")]),s._v(", and the dropdown part is rendered by the "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("dropdown")]),s._v(". By default, dropdown list shows when you hover on the triggering element without having to click it.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n
staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"a"')]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"b"')]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"c"')]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"d"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"e"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCommand(command) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'click on item '")]),s._v(" + command);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dropdown"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"triggering-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Triggering
},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("When the vertical space is limited and the form is relatively simple, you can put it in one line.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="Approved by">\n    <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="formInline.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item><el-form-item>\n    <el-button type="primary" @click="onSubmit">Query</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: '',\n          region: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[a("el-form-item",{attrs:{label:"Approved by"}},[a("el-input",{attrs:{placeholder:"Approved by"},model:{value:s.formInline.user,callback:function(t){s.formInline.user=t},expression:"formInline.user"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.formInline.region,callback:function(t){s.formInline.region=t},expression:"formInline.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Query")])],1)],1)],1),a("p",[s._v("Set the "),a("code",[s._v("inline")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the form will be inline.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":inline")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline"')]),s._v
staticClass:"hljs-string"},[s._v('"date2"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Instant delivery"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delivery"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity type"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.type"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Online activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]
staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": checkAge, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n  <el-form-item prop="email" label="Email" :rules="[\n      { required: true, message: \'Please input email address\', trigger: \'blur\' },\n      { type: \'email\', message: \'Please input correct email address\', trigger: \'blur,change\' }\n    ]">\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="\'Domain\' + index" :key="domain.key" :prop="\'domains.\' + index + \'.value\'" :rules="{\n      required: true, message: \'domain can not be null\', trigger: \'blur\'\n    }">\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Submit</el-button>\n    <el-button @click="addDomain">New domain</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">Reset</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: ''\n          }],\n          email: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: ''\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicValidateForm,"label-width":"120px"}},[a("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",messag
staticClass:"hljs-comment"},[s._v("// import components")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[s._v("The Chinese language pack is imported by default, even if you're using another language. But with "),a("code",[s._v("NormalModuleReplacementPlugin")]),s._v(" provided by webpack you can replace default locale:")]),a("p",[s._v("webpack.config.js")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v("plugins")]),s._v(": [\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),a("span",{staticClass:"hljs-regexp"},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n  ]\n}\n")])]),a("h2",{attrs:{id:"compatible-with"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",[s._v("vue-i18n@5.x")])]),a("p",[s._v("Element is compatible with "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n@5.x")]),s._v(", which makes multilingual switching even easier.")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = "),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v("\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", enLocale)\n")])]),a("h2",{attrs:{id:"compatible-with-other-i18n-plugins"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-other-i18n-plugins","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with other i18n plugins")]),a("p",[s._v("Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(":
staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"inputnumber"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"size"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#size","aria-hidden":"true"}},[s._v("¶")]),s._v(" Size")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Additional "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(" sizes of the input box are available")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("the minimum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("the maximum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[a("code",[s._v("Infinity")])])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("incremental step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of the component")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the component is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("controls")]),a("td",[s._v("whether to enable the control buttons")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("chan
},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input7"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input8"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input9"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input9")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("You can get some recommended tips based on the current input.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">list suggestions when activated</div>\n    <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="Please Input" @select="handleSelect"></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">list suggestions on input</div>\n    <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="Please Input" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>\n  </el-col>\n</el-row>\n\n',script:'\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.indexOf(queryString.toLo
},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n\n        clearTimeout("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout);\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout = setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          cb(results);\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(" * "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random());\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Textarea")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Resizable for entering multiple lines of text information. Add attribute "),a("code",[s._v('type="textarea"')]),s._v(" to change "),a("code",[s._v("input")]),s._v(" into native "),a("code",[s._v("textarea")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autosize-textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autosize-textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autosize Textarea")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Setting the "),a("code",[s._v("autosize")]),s._v(" prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to "),a("code",[s._v("autosize")]),s._v(" to specify the minimum and maximum number of lines the textarea can automatically adjust.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mixed-input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mixed-input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Mixed input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v(
staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a
script:null,style:"\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("You can enable flex layout by setting "),a("code",[s._v("type")]),s._v(" attribute to 'flex', and define the layout of child elements by setting "),a("code",[s._v("justify")]),s._v(" attribute with start, center, end, space-between or space-around.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[
style:"\n  body {\n    margin: 0;\n  }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading.body",value:s.loading,expression:"loading",modifiers:{body:!0}}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Element provides two ways to invoke Loading: directive and service. For the custom directive "),a("code",[s._v("v-loading")]),s._v(", you just need to bind a "),a("code",[s._v("boolean")]),s._v(" value to it. By default, the loading mask will append to the element where the directive is used. Adding the "),a("code",[s._v("body")]),s._v(" modifier makes the mask append to the body element.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.body")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-tag"},[s._v("body")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("
staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-att
},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("callback function when menu is activated")]),a("td",[s._v("index: index of activated menu, indexPath: index path of activated menu")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("callback function when sub-menu expands")]),a("td",[s._v("index: index of expanded sub-menu, indexPath: index path of expanded sub-menu")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("callback function when sub-menu collapses")]),a("td",[s._v("index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("callback function when menu-item is clicked")]),a("td",[s._v("el: menu-item instance")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"submenu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" SubMenu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("unique identification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("unique identification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("route")]),a("td",[s._v("Vue Router object")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-group-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Group Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("group title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(536)},function(s,t,a){var l=a(13)(a(537),a(538),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{open:function(){var s=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(t){s.$message({type:"info",message:"action: "+t})}})},open2:function(){var
}]}},function(s,t,a){s.exports=a(540)},function(s,t,a){var l=a(13)(a(541),a(542),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){this.$message("This is a message.")},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")},open5:function(){this.$message({showClose:!0,message:"This is a message."})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.")]),s._m(1),a("p",[s._v("Displays at the top, and disappears after 3 seconds.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open">Show message</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('This is a message.');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("Show message")])]],2),a("p",[s._v("The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a "),a("code",[s._v("$message")]),s._v(" method for invoking. Message can take a string as parameter, and it will be shown as the main body.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("Show message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Used to show the feedback of Success, Warning, Message and Error activities.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open2">success</el-button>\n  <el-button :plain="true" @click="open3">warning</el-button>\n  <el-button :plain="true" @click="open">message</el-button>\n  <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n\n',script:"\n  expor
staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Success'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a success message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a warning message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open5() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.info({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Info'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an info message'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.error({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Error'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an error message'")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Customize Notification's offset from the top edge of the screen")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open7">\n    Notification with offset\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open7() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'This is a success message',\n          offset: 100\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n    Notification with offset\n  ")])]],2),a("p",[s._v("Set the "),a("code",[s._v("offset")]),s._v(" attribute to customize Notification's offset from the top edge of the screen. Note that every Notification instance of the same moment should have the same offset.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("\n    Notification with offset\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v
attrs:{id:"small-pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Small Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-elements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},[s._v("¶")]),s._v(" More elements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("small")]),a("td",[s._v("whether to use small pagination")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("page-size")]),a("td",[s._v("item count of each page")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("10")])]),a("tr",[a("td",[s._v("total")]),a("td",[s._v("total item count")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("page-count")]),a("td",[s._v("total page count. Set either "),a("code",[s._v("total")]),s._v(" or "),a("code",[s._v("page-count")]),s._v(" and pages will be displayed; if you need "),a("code",[s._v("page-sizes")]),s._v(", "),a("code",[s._v("total")]),s._v(" is required")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("current-page")]),a("td",[s._v("current page number, supports the .sync modifier")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("layout")]),a("td",[s._v("layout of Pagination, elements separated with a comma")]),a("td",[s._v("string")]),a("td",[a("code",[s._v("sizes")]),s._v(", "),a("code",[s._v("prev")]),s._v(", "),a("code",[s._v("pager")]),s._v(", "),a("code",[s._v("next")]),s._v(", "),a("code",[s._v("jumper")]),s._v(", "),a("code",[s._v("->")]),s._v(", "),a("code",[s._v("total")]),s._v(", "),a("code",[s._v("slot")])]),a("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[s._v("page-sizes")]),a("td",[s._v("options of item count per page")]),a("td",[s._v("number[]")]),a("td",[s._v("—")]),a("td",[s._v("[10, 20, 30, 40, 50, 100]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("size-change")]),a("td",[s._v("triggers when "),a("code",[s._v("page-size")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",[s._v("page-size")])])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when "),a("code",[s._v("current-page")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",[s._v("current-page")])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("custom content. To use this, you need to declare "),a("code",[s._v("slot")]),s._v(" in "),a("code",[s._v("layout")])])])])])}]}},function(s,t,a){s.exports=a(554)},function(s,t,a){function l(s){a(555)}var n=a(13)(a(557),a(558),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(556);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.
},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In this case the percentage takes no additional space.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1),a("p",[a("code",[s._v("stroke-width")]),s._v(" attribute decides the "),a("code",[s._v("width")]),s._v(" of progress bar, and use "),a("code",[s._v("text-inside")]),s._v(" attribute to put description inside the progress bar.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')
staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio disabled v-model="radio1" label="disabled">optionA</el-radio>\n  <el-radio disabled v-model="radio1" label="selected and disabled">optionB</el-radio>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio1: 'selected and disabled'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("optionA")]),a("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("optionB")])]],2),a("p",[s._v("You just need to add the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selected and disabled"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("defaul
},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("You can customize icons for three different levels using "),a("code",[s._v("icon-classes")]),s._v(". In this example, we also use "),a("code",[s._v("void-icon-class")]),s._v(" to set the icon if it is unselected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":icon-classes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("void-icon-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"icon-rate-face-off"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Read-only Rate is for displaying rating score. Half star is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-rate v-model="value5" disabled show-text text-color="#ff9900" text-template="{value} points">\n</el-rate>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{disabled:"","show-text":"","text-color":"#ff9900","text-template":"{value} points"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1),a("p",[s._v("Use attribute "),a("code",[s._v("disabled")]),s._v(" to make the component read-only. Add "),a("code",[s._v("show-text")]),s._v(" to display the rating score at the right side. Additionally, you can use attribute "),a("code",[s._v("text-template")]),s._v(" to provide a text template. It must contain "),a("code",[s._v("{value}")]),s._v(", and "),a("code",[s._v("{value}")]),s._v(" will be replaced with the rating score.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff9900"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("text-template")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{value} points"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass
staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Multiple select uses tags to display selected options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value5" multiple placeholder="Select">\n    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value5: []\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("multiple")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" to enable multiple mode. In this case, the value of "),a("code",[s._v("v-model")]),s._v(" will be an array of selected options.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{
},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options4")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("list")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("states")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v('"Alabama"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Alaska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Arizona"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Arkansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"California"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Colorado"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Connecticut"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Delaware"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Florida"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Georgia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Hawaii"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Idaho"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Illinois"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Indiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Iowa"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kentucky"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Louisiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maine"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maryland"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Massachusetts"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Michigan"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Minnesota"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Mississippi"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Missouri"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Montana"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Nebraska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Nevada"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Hampshire"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"New Jersey"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Mexico"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"North Carolina"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"North Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Ohio"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Oklahoma"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Oregon"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Pennsylvania"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Rhode Island"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"South Carolina"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"South Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Tennessee"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Texas"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Utah"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Vermont"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Virginia"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(", "),a("span",{staticClas
slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Breakpoints not displayed")]),a("el-slider",{attrs:{step:10},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Breakpoints displayed")]),a("el-slider",{attrs:{step:10,"show-stops":""},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("p",[s._v("Set step size with the "),a("code",[s._v("step")]),s._v(" attribute. You can display breakpoints by setting the "),a("code",[s._v("show-stops")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints not displayed"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints displayed"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hlj
staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("direction")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-that-contains-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar that contains status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-step-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical step bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("space")]),a("td",[s._v("the spacing of each step, will be responsive if omitted. Support percentage.")]),a("td",[s._v("Number,String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("dir
staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }]\n        }\n      }\n    }\n  ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Striped table makes it easier to distinguish different rows.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" stripe style="width: 100%">\n    <el-table-column prop="date" label="Date" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Name" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="Address">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Attribute "),a("code",[s._v("stripe")]),s._v(" accepts a "),a("code",[s._v("Boolean")]),s._v(". If "),a("code",[s._v("true")]),s._v(", table will be striped.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("stripe")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">
},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }],\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("When there are too many columns, you can fix some of them.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" border style="width: 100%">\n    <el-table-column fixed prop="date" label="Date" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="Name" width="120">\n    </el-table-column>\n    <el-table-column prop="state" label="State" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="City" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="Address" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="Zip" width="120">\n    </el-table-column>\n    <el-table-column fixed="right" label="Operations" width="120">\n      <template scope="scope">\n        <el-button @click="handleClick" type="text" size="small">Detail</el-button>\n        <el-button type="text" size="small">Edit</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{cli
},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData4" border style="width: 100%" max-height="250">\n    <el-table-column fixed prop="date" label="Date" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="Name" width="120">\n    </el-table-column>\n    <el-table-column prop="state" label="State" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="City" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="Address" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="Zip" width="120">\n    </el-table-column>\n    <el-table-column fixed="right" label="Operations" width="120">\n      <template scope="scope">\n        <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small">\n          Remove\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData4: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,border:"","max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(a){a.preventDefault(),s.deleteRow(t.$index,s.tableData4)}}},[s._v("\n          Remove\n        ")])]}]])})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("max-height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.")]),a("div",{staticClass:"highlight",slot:
staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("Single row selection is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">\n    <el-table-column type="index" width="50">\n    </el-table-column>\n    <el-table-column property="date" label="Date" width="120">\n    </el-table-column>\n    <el-table-column property="name" label="Name" width="120">\n    </el-table-column>\n    <el-table-column property="address" label="Address">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">Select second row</el-button>\n    <el-button @click="setCurrent()">Clear selection</el-button>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData,"highlight-current-row":""},on:{"current-change":s.handleCurrentChange}},[a
},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("Filter the table to find desired data.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" border style="width: 100%">\n    <el-table-column prop="date" label="Date" sortable width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Name" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="Address
staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"expand"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("State: "),a("span",[s._v("{{")]),s._v(" props.row.state "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("City: "),a("span",[s._v("{{")]),s._v(" props.row.city "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Address: "),a("span",[s._v("{{")]),s._v(" props.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Zip: "),a("span",[s._v("{{")]),s._v(" props.row.zip "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")
attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed columns and header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fluid-height Table with fixed header (and columns)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping-table-head"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping table head")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sorting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sorting")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filter")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-column-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom column template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"expandable-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Expandable row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"summary-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#summary-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Summary row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("table data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Table's height. By default it has an "),a("code",[s._v("auto")]),s._v(" height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max-height")]),a("td",[s._v("Table's max-height. The height of the table starts from "),a("code",[s._v("auto")]),s._v(" until it reaches the maxHeight limit. The "),a("code",[s._v("maxHeight")]),s._v(" is measured in pixels, same as "),a("code",[s._v("height")])]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("stripe")]),a("td",[s._v("whether table is striped")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("whether table has vertical border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fit")]),a("td",[s._v("whether width of column automatically fits its container")]),a("td",[s._v("boolean")]),a("td",[s.
staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> Route</span>\n    Route\n  </el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" Route")]),s._v("\n    Route\n  ")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"label"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v(" Route"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    Route\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Only card type Tabs support addable & closeable.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">\n  <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n\n',script:"\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        
staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in tags"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.name"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.type"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag.name"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tags")]),s._v(": [\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 1'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 2'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'gray'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 3'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'primary'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 4'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 5'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 6'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'danger'")]),s._v(" }\n        ]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag :key="tag" v-for="tag in dynamicTags" :closable="true" :close-transition="false" @close="handleClose(tag)">\n{{tag}}\n</el-tag>\n<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n',script:"\n  export default {\n    data() {\n      return {\n        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],\n        inputVisible: false,\n        inputValue: ''\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$n
},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("selectableRange")]),a("td",[s._v("available time range, e.g."),a("code",[s._v("'18:30:00 - 20:30:00'")]),s._v("or"),a("code",[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[s._v("string/array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(618)},function(s,t,a){function l(s){a(619)}var n=a(13)(a(621),a(622),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(620);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("a3fcd9aa",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-tooltip.demo-en-US .box .left{float:left;width:110px}.demo-tooltip.demo-en-US .box .right{float:right;width:110px}.demo-tooltip.demo-en-US:first-of-type .source .el-button{width:110px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{disabled:!1}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display prompt information for mouse hover.")]),s._m(1),a("p",[s._v("Tooltip has 9 placements.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n      <el-button>bo
},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Theme")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Tooltip has two themes: "),a("code",[s._v("dark")]),s._v(" and "),a("code",[s._v("light")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" More Content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"advanced-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#advanced-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Advanced usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("transition")]),s._v(" attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("disabled")]),s._v(" attribute allows you to disable "),a("code",[s._v("tooltip")]),s._v(". You just need set it to "),a("code",[s._v("true")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In fact, Tooltip is an extension based on "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(", you can use any attribute that are allowed in Vue-popper.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("The "),a("code",[s._v("router-link")]),s._v(" component is not supported in tooltip, please use "),a("code",[s._v("vm.$router.push")]),s._v(".")]),a("p",[s._v("Disabled form elements are not supported in tooltip, see more information at "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[s._v("MDN")]),s._v(", please wrap disabled form elements.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("effect")]),a("td",[s._v("Tooltip theme")]),a("td",[s._v("string")]),a("td",[s._v("dark/light")]),a("td",[s._v("dark")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("display content, can be overridden by "),a("code",[s._v("slot#content")])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("position of Tooltip")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("visibility of Tooltip")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tooltip is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset of the Tooltip")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("animation name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether an arrow is displayed. For more information, check "),a("a",{attrs:{href:"https://github.com/element-compo
attrs:{href:"#customizable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prop-aliases"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prop-aliases","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prop aliases")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("By default, Transfer looks for "),a("code",[s._v("key")]),s._v(", "),a("code",[s._v("label")]),s._v(" and "),a("code",[s._v("disabled")]),s._v(" in a data item. If your data items have different key names, you can use the "),a("code",[s._v("props")]),s._v(" attribute to define aliases.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("data source")]),a("td",[s._v("array[{ key, label, disabled }]")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether Transfer is filterable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-placeholder")]),a("td",[s._v("placeholder for the filter input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Enter keyword")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("custom filter method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("titles")]),a("td",[s._v("custom list titles")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['List 1', 'List 2']")])]),a("tr",[a("td",[s._v("button-texts")]),a("td",[s._v("custom button texts")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("custom render function for data items")]),a("td",[s._v("function(h, option)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("footer-format")]),a("td",[s._v("texts for checking status in list footer")]),a("td",[s._v("object{noChecked, hasChecked}")]),a("td",[s._v("—")]),a("td",[s._v("{ noChecked: '${total} items', hasChecked: '${checked}/${total} checked' }")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("prop aliases for data source")]),a("td",[s._v("object{key, label, disabled}")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("left-default-checked")]),a("td",[s._v("key array of initially checked data items of the left list")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("right-default-checked")]),a("td",[s._v("key array of initially checked data items of the right list")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("left-footer")]),a("td",[s._v("content of left list footer")])]),a("tr",[a("td",[s._v("right-footer")]),a("td",[s._v("content of right list footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v
name:"Root1"},{name:"Root2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s=void 0;s=a?[{name:"zone"+i++},{name:"zone"+i++}]:[],t(s)},500)},getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"二级 2-1"},{id:9,label:"三级 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])},append:function(s,t){s.append({id:n++,label:"testtest",children:[]},t)},remove:function(s,t){s.remove(t)},renderContent:function(s,t){var a=this,l=t.node,n=t.data,e=t.store;return s("span",{style:"white-space: normal"},[s("span",null,[s("span",null,[l.label])]),s("span",{style:"float: right; margin-right: 20px"},[s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.append(e,n)}}},["Append"]),s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.remove(e,n)}}},["Delete"])])])},filterNode:function(s,t){return!s||t.label.indexOf(s)!==-1}},data:function(){return{data:a,data2:l,regions:e,defaultProps:_,props:v,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display a set of data with hierarchies.")]),s._m(1),a("p",[s._v("Basic tree structure.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a(
staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("The content of tree nodes can be customized, so you can add icons or buttons as you will")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data2" :props="defaultProps" show-checkbox="" node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent">\n</el-tree>\n\n\n',script:"\n  let id = 1000;\n\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 
},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of node object is used as the node's label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which key of node object is used as the node's subtree")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Tree")]),s._v(" has the following method, which returns the currently selected array of nodes.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("filter")]),a("td",[s._v("filter all tree nodes, filtered nodes will be hidden")]),a("td",[s._v("Accept a parameter which will be used as first parameter for filter-node-method")])]),a("tr",[a("td",[s._v("getCheckedNodes")]),a("td",[s._v("If the node can be selected ("),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")]),s._v("), it returns the currently selected array of nodes")]),a("td",[s._v("Accept a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedNodes")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("an array of nodes to be checked")])]),a("tr",[a("td",[s._v("getCheckedKeys")]),a("td",[s._v("If the node can be selected ("),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")]),s._v("), it returns the currently selected array of node's keys")]),a("td",[s._v("(leafOnly) Accept a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedKeys")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setChecked")]),a("td",[s._v("set node to be checked or not, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not.")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("node-click")]),a("t
staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList2" list-type="picture">\n  <el-button size="small" type="primary">Click to upload</el-button>\n  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n\n',script:"\n  export default {\n    data() {\n      return {\n        fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList2,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"h